00-1010由于新项目的打包时间在“30分钟”左右，发布的“严肃”时间会减缓“下班”时间，所以我特意查看了相关文件，优化打包速度，尽量早点下班。
00-1010要优化，先分析。首先，我们需要知道是什么降低了我们的打包速度。
00-1010我们可以使用webpack-bundle-analyzer插件来分析打包后生成的文件。
安装npmiwebpack-捆绑包-分析器-D
用于修改webpack.prod.conf.js文件。
constbundleaalyzer plugin=require(' web pack-bundle-analyzer ')。BundleAnalyzerPlugin
//建设完成后，浏览器会自动打开localhost:8080
webpackkconfig . plugins . push(
new bundlealyzer plugin({ 0
分析仪端口：8080，
generateStatsFile:false
})
)
通过图片可以看到打包文件的具体信息。
00-1010简单进度-web pack-plugin可以显示打包百分比。
安装npmissimple-progress-web pack-plugin-d
用于修改webpack.prod.conf.js文件。
constssimpleprogresswebpackplugin=require(' simple-progress-web pack-plugin ')
.
plugins:[
newSimpleProgressWebpackPlugin()
]
.
效果如下：
00-1010从上面的进度可以看出，在打包过程中，压缩的地方太长了，当项目越来越臃肿的时候，就需要对项目的静态资源和依赖包进行梳理。
如果图片太大，可以压缩。这里有一个很好的压缩链接。可以删除项目中未使用的依赖项，并且可以按需引用依赖项。项目按需使用的ElementUI和Echarts都是挂在Vue.prototype上的引用，现在都是按需引用。
00-1010设置resolve.alias字段，以避免在打包过程中使用相对路径访问或导入文件时逐层搜索解析的文件resolve:
alias:{
@':resolve('src ')
}
}
合理配置扩展名解析. extensions可以自动解析确定的扩展名，但是如果扩展名太多，会导致解析过程太多，所以要合理配置扩展名，不要太多扩展名，项目引用多的文件会放在前面。我们的项目大部分是vue和js文件，只能参考这两种。
解决方案：{
extension s 3360['。vue '，'。js']
}
加载程序通过添加包含匹配的特定条件来预处理文件。在预处理各种文件时指定匹配目录后，webpack在解析文件时不会循环搜索其他目录，从而加快解析速度。
打包优化方案
webpack在预处理文件时是单线程的，所以我们可以用happypack来多线程处理文件。安装npmihappyppack-d
使用webpack.base.js文件进行修改
consthappyThre
adPool = HappyPack.ThreadPool({ size: os.cpus().length }); module: { rules: [ { test: /.js$/, loader: 'happypack/loader?id=babel', // 原始loader替换成`happypack/loader` include: [resolve('src')] } ] }, plugins: [ new HappyPack({ // id标识 需要处理的loader id: 'babel', // loader配置和原始配置一样 loaders: [ { loader: 'babel-loader', options: { presets: ['es2015'], cacheDirectory: true } } ], threadPool: happyThreadPool }) ]babel-plugin-dynamic-import-node异步加载
babel-plugin-dynamic-import-node插件是使import() 替换成 require 编译
安装npm i babel-plugin-dynamic-import-node -D 使用修改.babelrc 文件
"env": { "development": { "plugins": ["dynamic-import-node"] }, "production": { "plugins": ["dynamic-import-node"] } }「注意」：使用插件build后没有chunk files文件。
DllPlugin分包
通过DllPlugin插件分离出第三方包
新建webpack.dll.conf.jsconst path = require('path'); const webpack = require('webpack'); const CleanWebpackPlugin = require("clean-webpack-plugin"); module.exports = { entry: { vendor: [ 'vue', 'vue-router', 'vuex', 'axios', 'element-ui', 'echarts' ] }, output: { filename: '[name]_dll_[hash:6].js', // 产生的文件名 path: path.resolve(__dirname, '../static/dll'), library: '[name]_dll_[hash:6]' }, plugins: [ new CleanWebpackPlugin({ root: path.resolve(__dirname, '../static/dll'), dry: false // 启用删除文件 }), new webpack.DllPlugin({ name: '[name]_dll_[hash:6]', path: path.resolve(__dirname, '../static/dll', '[name].dll.manifest.json') }) ] }; 修改webpack.prod.conf.js使用add-asset-html-webpack-plugin动态添加dll.js到html。
「需要注意」
add-asset-html-webpack-plugin要在HtmlWebpackPlugin后引入；html-webpack-plugin依赖包版本4.0.0-alpha会出个问题，添加上去的路径会变成undefined需要是「3.2.0」版本const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin'); ... plugins: [ // 插入dll json new webpack.DllReferencePlugin({ context: path.join(__dirname), manifest: require('../static/dll/vendor.dll.manifest.json') }), new HtmlWebpackPlugin(), // 插入 dll js new AddAssetHtmlPlugin([{ publicPath: config.build.assetsPublicPath + 'static/dll/', // 注入到html中的路径 outputPath: 'static/dll/', // 输出文件目录 filepath: resolve('static/dll/*.js'), // 文件路径 includeSourcemap: false, typeOfAsset: "js" }]) ]减少 vendor 大小
使用 externals 配置来告诉 webpack 不用打包第三方库，需要在 index.html 页面引入第三方库的 CDN
module.exports = { entry: {}, externals: { 'vue': vue } }总结
项目经过以上优化，打包从「30」分钟，到「2」分钟不到，整体还有优化空间，可以使用其他cdn等优化方式。