未进行打包优化的痛点：
随着项目的不断扩大，引入的第三方库会越来越多，我们每次build的时候会对所有的文件进行打包，耗时必定很长，不利于日常开发。
解决思路：
第三方库我们只是引入到项目里来，一般不会经常性的去修改源码，一般都是在src目录下编写业务代码，因此可以把第三方依赖和src分开打包。
每次build的时候我们只需要把之前build好的第三方依赖文件引入到项目中即可，避免了我们每次build的时候都会build第三方依赖。
当第三方依赖发生改变的时候我们只需要把第三方依赖再build一次就行。
步骤一：构建项目 引入第三方依赖
## 初始化项目
vue init webpack test
cd test
npm run dev
##安装依赖模块（静态资源）
npm i element-ui -S
##在main.js引入element-ui
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
Vue.use(ElementUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
##编译打包
npm run build
可以看见Time：15850ms，打包花费了近16秒，如果以后还要加上各种包及其他行为，打包时间难以想象。这也就是我们为什么要引入dllPlugin的原因！
步骤二：使用DllPlugin插件把第三方依赖抽离出来
##在build文件夹下创建webpack.dll.conf.js
内容如下：
'use strict'
const path = require("path");
const webpack = require("webpack");
module.exports = {
// 你想要打包的模块的数组
entry: {
vendor: ['vue', '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, '../static', '[name]-manifest.json'),
name: '[name]_library',
context: __dirname
})
]
};
##修改webpack.prod.conf.js文件
在plugins中添加
//打包优化
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('../static/vendor-manifest.json')
}),
##package.json中scripts下加入该命令"dll": "webpack --config build/webpack.dll.conf.js"
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js",
"dll": "webpack --config ./build/webpack.dll.conf.js"
}
##执行下npm run dll 命令将第三方依赖进行打包
static文件下生成vendor-manifest.json文件和js/vendor.dll.js文件
##再执行npm run build打包文件
打包时间为8s,快了一倍
步骤三：进一步优化
##找到webpack.base.conf.js文件发现
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
}
这就代表main.js中的import Vue from 'vue' 其实是引用的'vue/dist/vue.esm.js'，而webpack.dll.config.js并不知道vue指代的是'vue/dist/vue.esm.js'，所以我们需要修改webpack.dll.config.js配置：
将
entry: {
vendor: ['vue', 'vue-router', 'element-ui']
}
改为：
entry: {
vendor: ['vue/dist/vue.esm.js', 'vue-router', 'element-ui']
},
##并且在plugins中添加如下内容（压缩打包后的文件）
//压缩打包文件
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
##修改webpack.base.conf.js文件，build打包时引入dll库。
cnpm i html-webpack-include-assets-plugin -S
添加
const IncludeAssetsPlugin = require('html-webpack-include-assets-plugin')
在module.exports下添加plugins
plugins:[
new IncludeAssetsPlugin({
assets: [`${config.build.assetsSubDirectory}/js/vendor.dll.js`],
append: false
}),
]
##由于我们修改了webpack.dll.config.js，所以我们需要重新打包：
## 重新打包npm run dll
## 重新打包源文件npm run build
不到6s
欧凯，这只是一种优化的方式，还有其他可优化的部分，后续继续添加。
赶紧去解决打包时间过长的烦恼吧。
网友评论