区分开发环境和生产环境
- 开发环境不需要去压缩代码
- 指定调试模式devtool模式
压缩代码用ParalleUglifyPlugin代替自带的UglifyJsPlugin插件
自带的js压缩插件是单线程执行的，而webpack-parallel-uglify-plugin可以并行的执行 开发环境不做无意义的操作
很多配置，在开发阶段是不需要去做的，我们可以区分出开发和线上的两套配置，这样在需要上线的时候再全量编译即可，比如代码压缩，目录内容清理，计算文件hash,提取css文件等
babel-loader开启缓存
babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大多余，同时也会减慢编译效率
可以加上cacheDirectory参数或使用transform-runtime插件试试
// webpack.config.js
use: [{
loader: 'babel-loader',
options: {
cacheDirectory: true
}]
// .bablerc
{
"presets": [
"env",
"react"
],
"plugins": ["transform-runtime"]
}
使用happypack来加速构建
happypack会采用多进程去打包构建
优化构建时的搜索路径alias
使用noParse
webpack打包的时候，有时不需要解析某些模块的加载(这些模块并没有依赖，或者并根本没有模块化)，我们可以直接加上这个参数，直接跳过这种解析
module:{
noParse: /node_modules\/(jquery.js)
}
启用DllPlugin和DllReferencePlugin预编译库文件
这是最复杂也是提升效果最明显的一步，原理是将第三方库文件单独打包一次，以后的编译都不需要在编译打包第三方库
拷贝静态资源文件，引入DllPlugin和DllReferencePlugin来提前构建一些第三方库，来优化Webpack阿宝。
而在生产环境时，就需要将提前构建好的包同步到dist中
对于commonChunkPlugin,webpack每次打包实际还是需要去处理这些第三方库，只是打包完之后，能把第三方库和我们自己的代码分开。 而DllPlugin则是能把第三方代码完全分离开，即每次只打包项目自身的代码。 在build/文件夹下新建webpack.dll.config.js文件,复制一下代码:
const path = require("path")
const webpack = require("webpack")
module.exports = {
// 你想要打包的模块的数组
entry: {
vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'vuex']
},
output: {
path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
filename: '[name].dll.js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_library',
context: __dirname
}),
// 压缩打包的文件
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}
在build/webpack.dev.config.js和build/webpack.prod.config.js中添加plugins
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./vendor-manifest.json')
}),
在根目录下的index.html下引入预编译的库
<script src="./static/js/vendor.dll.js"></script>
在package.json/scripts下中添加dll命令
"dll": "webpack --config ./build/webpack.dll.config.js"
运行:
npm run dll
然后再
npm run dev或npm run build
提取公共代码 使用CommonsChunkplugin提取公共的模块，可以减少文件体积，也有助于浏览器层的文件缓存
npm run dll
npm run dev 或npm run build
