vue-cli2 构建速度优化的实现方法
对于使用vue-cli脚手架创建的前端项目，编译发布几乎是必需操作，有的编译只需要几秒钟，快如闪电，有的却需要好几分钟，慢如蜗牛。如果是线上进行热修复，那更是分秒必争，网页响应的速度直接影响了用户体验，用户不会那么有耐心长时间等着，让你慢慢编译。
网上流传vue-cli一些优化配置，有些在新版本的vue-cli和webpack3已经不再需要了，有些是针对webpack4的。对于新版本的vue-cli和webpack3，以下简单配置优化后，即可大幅提升构建速度。
- 按需引用及动态路由
- 启用uglifyjs-webpack-plugin缓存
- 关闭source-map
- 利用DllPlugin和DllReferencePlugin提取公用库
一、动态路由
1、修改src/router/index.js
importVuefrom'vue'
importRouterfrom'vue-router'
//webpackChunkName打包后的文件名
constMenu=()=>import(/*webpackChunkName:'Menu'*/'@/pages/menu/index.vue')
exportdefaultnewRouter({
routes:[
{
path:'/',
name:'Menu',
component:Menu
}
]
})
2、配置.babelrc（可选）
{
...
"comments":true,//输出编译信息
"plugins":["transform-vue-jsx","transform-runtime"]
}
3、修改build/webpack.prod.conf.js
output:{
path:config.build.assetsRoot,
filename:utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename:utils.assetsPath('js/[name].js')//使用webpackChunkName定义的文件名
},
二、启用uglifyjs-webpack-plugin缓存
newUglifyJsPlugin({
parallel:true,//并行
cache:true//缓存
}),
三、关闭source-map
修改src/config/index.js中productionSourceMap值
productionSourceMap:false
四、公用库提取
1、安装clean-webpack-pluginadd-asset-html-webpack-plugin
yarnaddclean-webpack-pluginadd-asset-html-webpack-plugin@2.1.0--dev
2、build目录下创建webpack.dll.conf.js
constwebpack=require('webpack')
constpath=require('path')
constCleanWebpackPlugin=require('clean-webpack-plugin')
constdllPath=path.resolve(__dirname,'../src/assets/dll')//dll文件存放的目录
process.env.NODE_ENV='production'//NODE_ENV设置为production减少依赖
module.exports={
entry:{//把vue相关模块的放到一个单独的动态链接库
vue:['babel-polyfill','vue','vue-router','vuex','axios','element-ui']
},
output:{
filename:'[name]-[hash].dll.js',//生成vue.dll.js
path:dllPath,
library:'_dll_[name]'
},
plugins:[
newCleanWebpackPlugin(['*.js'],{//清除之前的dll文件
root:dllPath
}),
newwebpack.DefinePlugin({
'process.env':{
NODE_ENV:JSON.stringify(process.env.NODE_ENV)//设置环境变量
}
}),
newwebpack.DllPlugin({
name:'_dll_[name]',//manifest.json描述动态链接库包含了哪些内容
path:path.join(__dirname,'./','[name].dll.manifest.json')
}),
//压缩代码
newwebpack.optimize.UglifyJsPlugin({
compress:{
warnings:false,
pure_funcs:['console.log']
},
sourceMap:false
})
]
}
3、在package.json中新增dll构建命令
"scripts":{
"dll":"webpack--configbuild/webpack.dll.conf.js"//dll打包命令
},
4、修改build/webpack.prod.conf.js
constAddAssetHtmlPlugin=require('add-asset-html-webpack-plugin')
plugins:[
//引用manifest.json
newwebpack.DllReferencePlugin({
manifest:require('./vue.dll.manifest.json')
}),
//将dll注入到生成的html模板中
newAddAssetHtmlPlugin({
filepath:path.resolve(__dirname,'../src/assets/dll/*.js'),//dll文件位置
publicPath:config.build.assetsPublicPath+utils.assetsPath('dll/'),//dll引用路径
outputPath:config.build.assetsPublicPath+utils.assetsPath('dll/'),//dll最终输出的目录
includeSourcemap:false
//hash:true,
}),
...
]
五、编译
yarnrundll//运行一次生成dll文件即可，下次构建时不必运行 yarnrunbuild
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。