原因是在使用Vue开发单页应用的时候，随着项目页面的增多，你会发现生产环境的构建速度会很慢，初始js大小页面会变得越来越大。受不了的时候就该优化了。这方面思路的优化无非是异步加载和提取一些基本的js库，不需要长时间更新代码。解决方法1.异步加载（懒加载）可以使用vue-router的路由懒加载点击链接学习。2.基础库的提取，可以学习DllPlugin和DllReferencePlugin这两个插件，配合(add-asset-html-webpack-plugin)一起完成提取到自动导入。第一步：新建一个webpack.dll.config.js（名字自己定义）。值得关注的是lib数组（资源依赖包，提前编译好）。这里根据自己项目的具体引用添加constwebpack=require('webpack'。);constpath=require('路径');constisDebug=process.env.NODE_ENV==='开发';常量输出路径=isDebug？path.join(__dirname,'../src/common/debug'):path.join(__dirname,'../src/common/dist');constfileName='[name]_[hash].js';//资源依赖包，预先编译好constlib=['vue','vuex','vue-router','axios','body-parser','cookie-parser','weixin-js-sdk','element-ui','vue-scroll'];constplugin=[newwebpack.DllPlugin({/***path*定义生成清单文件的位置*[name]替换为条目的名称*/path:path.join(outputPath,'manifest.json'),/***名称*dll捆绑输出到该全局变量*与output.library相同。*/name:'[name]_[hash]',context:__dirname}),newwebpack.optimize.OccurrenceOrderPlugin()];if(!isDebug){plugin.push(//newwebpack.DefinePlugin({//'process.env.NODE_ENV':JSON.stringify('production')//}),newwebpack.optimize.UglifyJsPlugin({compress:{warnings:false},sourceMap:true}))}module.exports={devtool:'#source-map',entry:{lib:lib},output:{path:outputPath,文件名:fileName,/***output.library*将被定义为window.${output.library}*这里在第二个示例中，它将被定义为`window.vendor_library`*/library:'[name]_[hash]',libraryTarget:'umd',umdNamedDefine:true},plugins:plugin}第二步：执行简单构建方式是在package.json文件中添加（注意使用的是webpack2）"dll-production":"NODE_ENV=productionwebpack--configbuild/webpack.dll.config.js--progress","dll-test":"NODE_ENV=developmentwebpack--configbuild/webpack.dll.config.js--progress",然后通过npm运行dll-productionbuildwithnpmrundll-test就像NODE_ENV的值一样不同环境引用不同路径下的lib.js构建完成后目录如下图Step3:Importlib.js#Installadd-asset-html-webpack-plugin$npminstall--save-devadd-asset-html-webpack-plugin修改开发环境webpack.dev.config.js#InitializationconstAddAssetHtmlPlugin=require('add-asset-html-webpack-plugin')在插件中添加新的webpack。resolve(__dirname,'../src/common/debug/lib_*.js')}),执行npmrundev修改生产环境webpack.prod.config.js#initializationconstAddAssetHtmlPlugin=require('add-asset-html-webpack-plugin')添加插件newwebpack.DllReferencePlugin({context:__dirname,manifest:require(path.join(__dirname,'../src/common/dist/manifest.json'))}),新的AddAssetHtmlPlugin({文件路径:路径.resolve(__dirname,'../src/common/dist/lib_*.js')}），执行npmrunbuild（同时，对比之前的构建速度，你会发现节省了很多时间，目前我的项目节省了1/3的工期）dll-plugin和CommonsChunkPlugin（在webpack4中被SplitChunksPlugin取代）的区别是共同的：都是将公共模块提取到父模块中，并使用缓存来提高访问速度（第一次加载除外）)区别：dll-plugin需要手动配置和打包公共模块，而CommonsChunkPlugin每次构建时根据配置打包公共模块。使用DllPlugin编译不经常更改的代码。这将提高引用程序的编译速度，即使它增加了构建过程的复杂性。webpack文档还推荐使用dll-plugin来分离公共模块。
