问题
在前端项目中，我们希望第三方库（vendors）和自己写的代码可以分开打包，vue-cli也帮我们配好了webpack的CommonsChunkPlugin，但是在使用vue-cli的打包的过程中有一些痛点。
一、verdors缓存失效
改变了app.js的一点儿代码，verdors打包的chunkhash就会改变,导致每次发布，vendors的缓存都会失效。这样增加了用户的流量消耗和首屏加载时间。
二、项目打包时间过长
在公司的台式机打包一次要花费30s，在个人笔记本上则需要花费40s之多。
为了解决上述问题，在网上查找资料后，找到使用 webpack dll这个方案。
解决过程
一、编写dll配置文件
先贴上我的webpack.dll.conf.js配置代码
var path = require('path');
var webpack = require('webpack');
var config = require('../config')
var ExtractTextPlugin = require('extract-text-webpack-plugin'); // 提取css
var AssetsPlugin = require('assets-webpack-plugin'); // 生成文件名，配合HtmlWebpackPlugin增加打包后dll的缓存
module.exports = {
entry: {
libs: [
'vue/dist/vue.esm.js',
'vue-router',
'vue-infinite-scroll',
'vue-cookie',
'vuex',
'jquery',
'iscroll',
'weui.js',
'video.js',
'babel-polyfill',
'resetcss',
'font-awesome/css/font-awesome.min.css',
'video.js/dist/video-js.min.css',
'element-ui',
'element-ui/lib/theme-default/index.css',
]
},
output: {
path: path.resolve(__dirname, '../public'),
filename: '[name].[chunkhash:7].js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.resolve(__dirname, '../public/[name]-mainfest.json'),
name: '[name]_library',
context: __dirname // 执行的上下文环境，对之后DllReferencePlugin有用
}),
new ExtractTextPlugin('[name].[contenthash:7].css'),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
}),
new AssetsPlugin({
filename: 'bundle-config.json',
path: './public'
}),
],
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: 'img/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: 'fonts/[name].[hash:7].[ext]'
}
}
]
},
}
1、
entry配置需要dll打包的库2、
module配置处理对应文件类型的loader-
3、增加
webpack.DllPlugin插件- 1、path:生成
mainfest.json文件的绝对路径。mainfest.json里面的内容为所有被打包到dll.js文件模块id的映射。 - 2、
name：webpack打包时mainfest.json包含的库的暴露出来的函数名名 - 3、
contenxt(可选):引入manifest文件的context，默认为webpack的context
- 1、path:生成
二、修改webpack.base.conf.js
在webpack.base.conf.js的plugins增加
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('../public/libs-mainfest.json') // 指向生成的manifest.json
}),
注：上面提到通过AssetsPlugin和HtmlWebpackPlugin给打包的dll.js各dll.css增加缓存机制
AssetsPlugin生成的bundle-config.js
{"libs":{"js":"libs.f7d8ef0.js","css":"libs.e2245d7.css"}}
webpack.dev.conf.js文件增加以下代码
var bundleConfig = require("../public/bundle-config.json")
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
libJsName:bundleConfig.libs.js,
libCssName:bundleConfig.libs.css,
env:config.dev.env,
}),
在index.html引入生成的dll.js,dll.css
<link rel="stylesheet" href="./public/<%= htmlWebpackPlugin.options.libCssName %>">
<script src="./public/<%= htmlWebpackPlugin.options.libJsName %>"></script>
上面为开发环境的配置，生产环境对应修改就可以了。
注：开发和生产环境都要首先使用 webpack运行
webpack.dll.conf.js生成dll.js, dll.css, mainfest.json文件，每次改变库文件也都需要重新执行一遍。
三、对比结果
优化前笔记本上打包时间为4000ms，
优化后笔记本打包时间为1800ms，同时也增加了这些库的缓存。
