2019-5-22 公司项目 代码优化1-webpack DllPluginDllReferencePlugin 抽出不常编译的模块单独打包

1.webpack

webpack.DllPlugin/DllReferencePlugin 抽出常用的插件,单独打包成js然后,塞到index.html中

webpack.dll.conf.js

const path = require('path'); const webpack = require('webpack'); const webpackConfig = { entry: { vendor: ['vue','vue-router','axios','vuex','fastclick','vue-lazyload','nprogress'], }, devtool: '#source-map', output: { path: path.join(__dirname, '../dist'), filename: '[name]_[hash].dll.js', library: '[name]_[hash]', }, plugins: [ new webpack.DllPlugin({ context: __dirname, name: '[name]_[hash]', path: path.join(__dirname, '../dist/manifest.json'), }) ], }; module.exports = webpackConfig

 

webpack.dev.conf.js

new webpack.DllReferencePlugin({ // context: path.join(__dirname), context: __dirname, manifest: require('../dist/manifest.json'), }), new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, hash:true }), new AddAssetHtmlPlugin([{ filepath: path.resolve(__dirname, '../dist/*.dll.js'), }]), new webpack.optimize.CommonsChunkPlugin({ name: 'app', async: 'vendor-async', children: true, minChunks: 3 })

坑:

DllReferencePlugin和DllPlugin的context:一定要保持一致,否则,会找不到路径,然后抽出失败;

 

抽出前,h5.js大小在1.2M左右,抽出vendor_xxx.dll.js后,变成1.0M;