打包优化(webpack dll)

Hello，大家周末好。在近期项目上线正在打包的时候正好在旁边有别的项目组的，嫌弃了我们项目的打包速度真的是狠狠的给我嘲讽了一下就连我们的全栈竟然都没有放过。所有今天在这里给大家分享一下我们是怎么提升打包速度的。

一：优化前的打包
先初始化一个项目然后引入大家不较常用的UI库插件等等，这里我就引入一个element给大家看一下效果。

打包速度：37406ms

二：优化后的打包

       安装：cnpm install add-asset-html-webpack-plugin@2.1.2

在build文件夹下新建文件夹名为 webpack.dll.conf.js

     const path = require('path');
		const webpack = require('webpack');
		module.exports = {
		  entry: {
		    vendor: [
		      'vue',
		      'vue-router',
		      'element-ui',
		      'xxxxxxx'      //这里是需要缓存的模块和插件
		    ]
		  },
		  output: {
		    path: path.join(__dirname, '../static/js'), //放在项目的static/js目录下面
		    filename: '[name].dll.js', //打包文件的名字
		    library: '[name]_library' //可选 暴露出的全局变量名
		    // vendor.dll.js中暴露出的全局变量名。
		    // 主要是给DllPlugin中的name使用，
		    // 故这里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。
		  },
		  plugins: [
		    new webpack.DllPlugin({
		      path: path.join(__dirname, '.', '[name]-manifest.json'), //生成上文说到清单文件，放在当前build文件下面，这个看你自己想放哪里了。
		      name: '[name]_library',
		      // context: __dirname
		    }),
		    //压缩 只是为了包更小一点 
		
		  ]
		};

在webpack.prod.conf.js添加下面代码（webpack.prod.conf.js文件是最终完成打包的配置文件）

   const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');  //在上面导入
   new webpack.DllReferencePlugin({
				context: path.resolve(__dirname, '..'),
				manifest: require('./vendor-manifest.json')
				}),
				//这个主要是将生成的vendor.dll.js文件加上hash值插入到页面中。
				new AddAssetHtmlPlugin([{
				filepath: path.resolve(__dirname, '../static/js/vendor.dll.js'),
				outputPath: utils.assetsPath('js'),
				publicPath: path.posix.join(config.build.assetsPublicPath, 'static/js'),
				includeSourcemap: false,
				hash: true,
				}]),

在package.json文件添加命令

"dll": "webpack --config build/webpack.dll.conf.js"

运行cnpm run dll，这时候会生成2个文件如图

然后打包cnpm run build
优化后的打包速度：10467ms（比之前快了将近快3倍了偶）

提醒：不是每次打包之前都需要cnpm run dll的如果你没有给webpack.dll.conf.js里面添加东西的话只需要dll一次以后就会走缓存，如果添加的配置项就先把dll生成后的2个文件删除以后重新cnpm run dll 然后打包cnpm run build就可以了

注意我这个种的配置方法适合webpack4.0一下版本，如果你的webpack版本是4.0以上版本可参考官方文档。最后奉上github：https://github.com/Liingot/dll