简单粗暴的Webpack打包优化
使用webpack+vue+......，在打包代码的时候经常由于引入的模块太多，导致打包速度很慢，并且打包后的js文件很大。
方案一：externals选项
配置externals选项：
// webpack.prod.config.js
// 多余代码省略
module.exports = {
externals: {
'vue': 'window.Vue',
'vuex': 'window.Vuex',
'vue-router': 'window.VueRouter'
...
}
}
// 配置externals之后，webpack不会把配置项中的代码打包进去，别忘了需要在外部引入cdn上的js文件
// html
<body>
<script src="XXX/cdn/vue.min.js"></script>
......
</body>方案二：webpack.DLLplugin
使用webpack.DLLplugin：
webpack.dll.config.js：
// webpack.dll.config.js
// 需要打包到一起的js文件
const vendors = [
'vue',
'vuex',
'vue-router',
'axios',
'moment',
'vue-echarts'
];
module.exports = {
// 也可以设置多个入口，多个vendor，就可以生成多个bundle
entry: {
vendor: vendors
},
// 输出文件的名称和路径
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, '..', 'static'),
library: '[name]_[chunkhash]',
},
plugins: [
// 这时候打包需要设置环境为production，因为像vue之类在
// dev环境下会比prod环境多一些信息，在生产环境如果打包的是dev代码，
// vue也会给出警告
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.DllPlugin({
path: path.join(__dirname, '..', 'static', '[name]-manifest.json'),
name: '[name]_[chunkhash]',
context: __dirname
}),
// 压缩
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new webpack.optimize.OccurrenceOrderPlugin()
]
}
写好配置文件之后，执行命令：
webpack --config webpack.dll.config.js之后就会在输出目录下看到两个文件：
// 打包后的js文件需要在页面中引入
vendor.bundle.js
// 这个依赖关系文件用于app打包
vendor-manifest.jsonwebpack.prod.config.js:
// webpack.prod.config.js
// 省略不必要的代码
module.exports = {
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require(path.join(__dirname, '..', 'static/vendor-manifest.json'))
})
]
}之后再执行命令去打包app中的静态资源文件的时候，就不会把vendor.bundle.js中已有的文件与自己的逻辑文件打包到一起，能够有效减小体积，同时manifest.json提供的依赖关系和模块id号也可以大大提高打包效率。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。