对于使用vue-cli脚手架创建的前端项目，编译发布几乎是必须的。有的编译只需要几秒，快如闪电，有的编译则需要几分钟，慢如蜗牛。如果在线进行修补程序，则分秒必争。网页响应的快慢直接影响用户体验，用户不会那么耐心等很久让你慢慢编译。网上流传着一些vue-cli的优化配置，有的在新版本的vue-cli和webpack3中已经不需要了，有的是针对webpack4的。对于新版本的vue-cli和webpack3，通过优化以下简单的配置，可以大大提升构建速度。按需引用和动态路由启用uglifyjs-webpack-plugin缓存关闭source-map使用DllPlugin和DllReferencePlugin提取公共库1.动态路由1.修改src/router/index.jsimportvuefrom'vue'importRouterfrom'vue-router'//webpackChunkName打包文件名constMenu=()=>import(/*webpackChunkName:'Menu'*/'@/pages/menu/index.vue')exportdefaultnewRouter({routes:[{path:'/',name:'Menu',component:Menu}]})2.Configuration.babelrc(optional){..."comments":true,//输出编译信息"plugins":["transform-vue-jsx","transform-runtime"]}3.修改build/webpack.prod.conf.jsoutput:{path:config.build.assetsRoot,filename:utils.assetsPath('js/[name].[chunkhash].js'),chunkFilename:utils.assetsPath('js/[name].js')//使用webpackChunkName定义的文件名},其次，启用uglifyjs-webpack-plugin缓存newUglifyJsPlugin({parallel:true,//parallelcache:true//cache}),3.关闭source-map，修改src/config/index.js中productionSourceMap的值productionSourceMap:false4.提取常用库1.安装clean-webpack-pluginadd-asset-html-webpack-pluginyarnaddclean-webpack-pluginadd-asset-html-webpack-plugin@2.1.0--dev2，在build目录下创建webpack.dll.conf.jsconstwebpack=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.jspath: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.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.jsconstAddAssetHtmlPlugin=require('add-asset-html-webpack-plugin')plugins:[//引用manifest.jsonnewwebpack.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,}),...]5.修改build/webpack.dev.conf.jsconstAddAssetHtmlPlugin=require('add-asset-html-webpack-plugin')plugins:[//referencemanifest.jsonnewwebpack.DllReferencePlugin({manifest:require('./vue.dll.manifest.json')}),//将dll注入生成的html模板newAddAssetHtmlPlugin({filepath:path.resolve(__dirname,'../src/assets/dll/*.js'),//dll文件位置publicPath:utils.assetsPath('dll/'),//dll引用路径outputPath:utils.assetsPath('dll/'),//dll最终输出目录includeSourcemap:false//hash:true,}),...]5.编译yarnrundll//运行一次生成dll文件即可，下次构建时不需要再运行yarnrunbuild/yarnrundev
