webpack dll打包优化

最近一直在学习一些webpack，所以综合了一下关于dll 打包优化的方法，应用到自己的项目中！当然百度搜索出来一推，大佬的文章数不胜数。咱们也得跟紧潮流不是，所以记录一下，赶紧用自己项目试试！（大佬勿喷）

一. 优化前的打包 ；
公司项目不算是很大，打包看看时间！

打包速度：21384ms ，21秒左右

二. 优化后的打包 ；

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

在bulid文件夹新建文件 ** webpack.dll.conf.js **

const path = require('path')
const webpack = require('webpack') 
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    entry:{
        vendor:[
            'axios',
            'vue',
            'vue-router',
            'vuex',
            'iview',
            //添加需要缓存的模块和插件
        ]
    },
    output:{
        path:path.resolve(__dirname,'../static/js'),
        filename:'[name].dll.js',//名字
        library:'[name]_library'
    },
    plugins:[
    	//压缩dll文件
        new UglifyJsPlugin({
            cache: false,    //是否启用文件缓存
            parallel: true,  //使用多进程并行运行来提高构建速度
            sourceMap: false // 错误信息映射到模块 
        }),
		//解释是启用作用域提升，作用是让代码文件更小、运行的更快（并无卵用）
       new webpack.optimize.ModuleConcatenationPlugin(),
       new webpack.DllPlugin({
           path:path.join(__dirname,'.','[name]-manifest.json'),
           name:'[name]_library'
       })
       //压缩
    ]

}

然后在 webpack.prod.conf.js 下添加代码（是为了最终打包的配置文件）

	const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
	//在plugins下 new 两个插件
    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"

欧了~ 现在我们试试打包速度！

打包速度：15321ms ，15秒左右

emmm，毕竟，项目小嘛 项目大一点可能效果更明显了。百度了很多总结了一下大佬的文章；

下面这个是我参考的大佬文章，配置明细是什么你们就自己去看咯 hhh 毕竟我只是想记录一下过程。
小声bb（我才不会告诉你们是我赖的打注释，略~）；

http://https://blog.csdn.net/weixin_39773218/article/details/97494099

来源：CSDN

作者：请君入瓮。

链接：https://blog.csdn.net/weixin_44648749/article/details/104069875