vue-cli webpack2项目打包优化分享
减小文件搜索范围
配置resolve.modules
Webpack的resolve.modules配置模块库（即node_modules）所在的位置，在js里出现import'vue'这样不是相对、也不是绝对路径的写法时，会去node_modules目录下找。但是默认的配置，会采用向上递归搜索的方式去寻找，但通常项目目录里只有一个node_modules，且是在项目根目录，为了减少搜索范围，可以直接写明node_modules的全路径；同样，对于别名(`alias)的配置，亦当如此：
functionresolve(dir){
returnpath.join(__dirname,'..',dir)
}
module.exports={
resolve:{
extensions:['.js','.vue','.json'],
modules:[
resolve('src'),
resolve('node_modules')
],
alias:{
'vue$':'vue/dist/vue.common.js',
'src':resolve('src'),
'assets':resolve('src/assets'),
'components':resolve('src/components'),
//...
'store':resolve('src/store')
}
},
...
}
合理设置test&include&exclude
test：必须满足的条件（正则表达式，不要加引号，匹配要处理的文件）
exclude：不能满足的条件（排除不处理的目录）
include：导入的文件将由加载程序转换的路径或文件数组（把要处理的目录包括进来）
这可以减少不必要的遍历，从而减少性能损失。
替换代码压缩工具
Webpack默认提供的UglifyJS插件，由于采用单线程压缩，速度慢；
webpack-parallel-uglify-plugin插件可以并行运行UglifyJS插件，更加充分而合理的使用CPU资源，这可以大大减少的构建时间；
当然，该插件应用于生产环境而非开发环境，安装插件后，进行如下配置：
//删掉webpack提供的UglifyJS插件
//newwebpack.optimize.UglifyJsPlugin({
//compress:{
//warnings:false,
//drop_console:true
//},
//sourceMap:true
//}),
//增加webpack-parallel-uglify-plugin来替换
constParallelUglifyPlugin=require('webpack-parallel-uglify-plugin');
newParallelUglifyPlugin({
cacheDir:'.cache/',//设置缓存路径，不改动的调用缓存，第二次及后面build时提速
uglifyJS:{
output:{
comments:false
},
compress:{
warnings:false
}
}
})
也试了一下同类型插件webpack-uglify-parallel，但并没有webpack-parallel-uglify-plugin效果好（可能因项目而异，在大家项目中可以使用对比）。
webpack-parallel-uglify-plugin插件相对UglifyJsPlugin打出的包略大（但是不明显）；这里的提速和增加的体积相比，我选择了追求速度（使用后我从40秒降到了19秒）。
拷贝静态文件
使用copy-webpack-plugin插件：把指定文件夹下的文件复制到指定的目录；其配置如下：
varCopyWebpackPlugin=require('copy-webpack-plugin')
plugins:[
...
//copycustomstaticassets
newCopyWebpackPlugin([
{
from:path.resolve(__dirname,'../static'),
to:config.build.assetsSubDirectory,
ignore:['.*']
}
])
]
DllPlugin&DllReferencePlugin
Dll这个概念应该是借鉴了Windows系统的dll。一个dll包，就是一个纯纯的依赖库，它本身不能运行，是用来给你的app引用的。
打包dll的时候，Webpack会将所有包含的库做一个索引，写在一个manifest文件中，而引用dll的代码（dlluser）在打包的时候，只需要读取这个manifest文件，就可以了。
一、在项目build文件夹下新增文件webpack.dll.conf.js，内容如下
varpath=require('path')
varwebpack=require('webpack')
module.exports={
entry:{
vendor:[//这里填写需要的依赖库
'babel-polyfill',
'axios',
'vue/dist/vue.common.js',
'vue-router',
'pingpp-js',
"region-picker"
]
},
output:{
path:path.resolve(__dirname,'../static/js'),
filename:'[name].dll.js',
library:'[name]_library'
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},
{
test:/\.js$/,
loader:'babel-loader',
exclude:/node_modules/
}
]
},
plugins:[
newwebpack.optimize.ModuleConcatenationPlugin(),
newwebpack.DllPlugin({
path:path.join(__dirname,'.','[name]-manifest.json'),
libraryTarget:'commonjs2',
name:'[name]_library'
}),
newwebpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
})
]
}
二、在webpack.prod.conf.js文件里插件部分添加：
plugins:[
...
//copycustomstaticassets
newwebpack.DllReferencePlugin({
context:path.resolve(__dirname,'..'),
manifest:require('./vendor-manifest.json')
})
]
三、在项目根目录index.html文件中添加：
四、在package.json里打包dll添加命令
"build:dll":"webpack--configbuild/webpack.dll.conf.js"
五、命令顺序
npmrunbuild:dll//打包一次之后依赖库无变动不需要执行 npmrunbuild
优点
Dll打包以后是独立存在的，只要其包含的库没有增减、升级，hash也不会变化，因此线上的dll代码不需要随着版本发布频繁更新。
App部分代码修改后，只需要编译app部分的代码，dll部分，只要包含的库没有增减、升级，就不需要重新打包。这样也大大提高了每次编译的速度。
假设你有多个项目，使用了相同的一些依赖库，它们就可以共用一个dll。
19s->15s
设置babel的cacheDirectory为true
在webpack.base.conf.js中修改babel-loader：
loader:'babel-loader?cacheDirectory=true',
15s->14s
设置noParse
如果你确定一个模块中，没有其它新的依赖，就可以配置这项，Webpack将不再扫描这个文件中的依赖，这对于比较大型类库，将能促进性能表现，具体可以参见以下配置：
module:{
noParse:/node_modules\/(element-ui\.js)/,
rules:[
{
...
}
}
happypack
加上后没太大的效果，可能用法有问题，有待深入尝试
以上这篇vue-cliwebpack2项目打包优化分享就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。