本文Demo的完整工程代碼, 參考dll-test
創建工程
vue init webpack-simple dll-test
cd dll-test && cnpm i
npm run build
Time: 3602ms
第三方庫
cnpm i --save vuex vue-router axios lodash element-ui
vim src/main.js
import _ from 'lodash'
import vuex from 'vuex'
import ElementUI from 'element-ui'
import axios from 'axios'
import vueRouter from 'vue-router'
npm run build
Time: 12605ms
DllPlugin
- webpack.dll.config.js
var path = require("path");
var webpack = require("webpack");
module.exports = {
// 你想要打包的模塊的數組
entry: {
vendor: ['vue', 'lodash', 'vuex', 'axios', 'vue-router', 'element-ui']
},
output: {
path: path.join(__dirname, './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'),
name: '[name]_library',
context: __dirname
}),
// 壓縮打包的文件，與該文章主線無關
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
};
webpack --config ./webpack.dll.config.js
- webpack.config.js
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./vendor-manifest.json')
})
]
- index.html
vim index.html
<script src="./static/js/vendor.dll.js"></script>
npm run build
Time: 3674ms
一些優化
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dll-test</title>
</head>
<body>
<div id="app"></div>
<script src="./static/js/vendor.dll.js"></script>
</body>
</html>
- webpack.config.js
cnpm i --save-dev html-webpack-plugin copy-webpack-plugin clean-webpack-plugin
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var CleanWebpackPlugin = require('clean-webpack-plugin')
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/',
filename: 'build.[hash].js'
},
devServer: {
historyApiFallback: true,
noInfo: true,
contentBase: path.join(__dirname, 'dist')
},
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./vendor-manifest.json')
}),
new HtmlWebpackPlugin({
inject: true,
template: './index.html',
filename: 'index.html'
}),
new CopyWebpackPlugin([
{ from: 'static', to: 'static' }
]),
new CleanWebpackPlugin(['dist'])
]
npm run dev
npm run build
小結
Improve Build Time Performance
參考
更多文章, 請支持我的個人博客
