开发环境
项目脚手架 vue-cli（官方推荐，非3.0）
打包构建工具 webpack@3.6.0
node@8.9.4（6以上都是可以的）
npm install vue-cli -g // 全局安装脚手架
vue init webpack projectName // vue脚手架初始化项目
npm install vuex axios qs element-ui -S // 安装项目所需依赖
定位打包优化
在package.json中，vue-cli已经为我们添加了开发和生产命令行脚本执行代码
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
},
项目打包时候，执行npm run build
如代码所写，通过node执行了build文件夹下面的build.js文件
在build.js中，不难看出
const webpack = require('webpack')
const webpackConfig = require('./webpack.prod.conf')
webpack(webpackConfig, (err, stats) => {
... // 此处为webpack打包回调处理
})
顺着webpack.prod.conf.js的引入，我们可以看出webpack的打包配置都是在这文件里面，我们通过webpack所做的打包优化也由此开始配置。
webpack基础结构介绍
这里先介绍下webpack配置的大致结构（基础部分了解的可以直接跳过）
- 入口起点
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
module.exports = {
entry: './src/app.js', // 默认值是'./src'
}
webpack执行时候的入口文件从这里开始执行，webpack可以从这里开始读取webpackConfig的相关配置进行项目开发打包
- 输出
配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。
module.exports = {
output: {
filename: 'bundle.js',
path: './dist/js'
}
}
webpack将打包好的文件命名为bundle.js并输出在dist/js目录下面
- 模式
提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。
module.exports = {
mode: 'production'
};
模式定义并区分了webpack的执行环境，大致可以区分为开发环境和生产环境
- loader
loader 用于对模块的源代码进行转换，也是webpack个人认为最重要的部分，webpack在识别整个项目打包部分的代码时候，我们可以根据自己项目的文件，进行识别，并分配不同的loader去对源代码进行转换处理。
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
如同上面的代码，遇到.css后缀结尾的文件，分配给css-loader去对源代码进行转换，遇到.ts后缀结尾的文件，分配给ts-loader去做处理。
- 插件
webpack文档定义为webpack的支柱功能，它支撑着webpack的各种额外功能，解决loader无法解决的其他事情。
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');
const config = {
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist/js')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader'
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
上面的例子有两个功能，压缩js和index.html自动引入打包静态资源
文章的主线是打包优化，webpack的细致结构可以去webpack官方文档进一步了解
优化步骤
回到webpack.prod.conf.js文件中，vue-cli脚手架对基础部分的webpack配置做了统一的提取，写在webpack.base.conf.js里面。
定义绝对路径
在webpack.base.conf.js文件中，我们可以在resolve中对项目的绝对路径进行定义，毕竟相对路径在js中，我认为是毒瘤...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
'components': resolve('src/components'),
'common': resolve('src/common')
}
},
大的依赖利用cdn引入
在webpack.base.conf.js文件中，对较大的文件在index.html中直接引入cdn地址，然后在可以在externals中在项目进行定义
// index.html
<script src="//cdn.bootcss.com/echarts/4.0.4/echarts.common.min.js"> </script>
然后在externals中定义供项目直接使用
externals: {
"echarts": "echarts"
}
externals中的key是给import的时候用的，value表示的是如何在global中访问到该对象，这里是window.echarts，在项目中可以直接使用，利用cdn优势的同时，避免webpack打包文件过大。
关掉productionSourceMap
在config目录下面的index.js文件中，vue-cli脚手架对开发环境和生产环境都做了相关配置，其中在build配置下设置productionSourceMap为false，避免产出.map后缀结尾的js文件，（除非需要线上调试）
开启gzip
同样在config目录下面的index.js文件中，开启productionGzip，可以产出.gz后缀结尾的js文件，个人印象中将近减少了2/3的打包代码体积。浏览器会优先加载.gz后缀结尾的文件，如果浏览器不能识别，再加载正常的文件，当然后台nginx部署的时候也是可以实现gzip压缩功能。需要值得注意的是，开启productionGzip后，需要安装一个webpack插件进行配合
npm install compression-webpack-plugin -D
这点可以在webpack.prod.conf.js里面悉知。
区别于脚手架自带分离方案的dll代码分离
vue-cli脚手架在webpack.prod.conf.js中，采用webpack插件自带的CommonsChunkPlugin方案，对项目中所引入的各种依赖进行分离打包。
一个完整项目下来，我们可能引用了vue,vue-router,vuex,axios,qs,element-ui,iviews,vux等等一系列依赖，类似于以上的依赖，我们基本不会经常变动，脚手架自带的方案是将这些提取出来存放为vendor.js和app.js文件中做了相关优化
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks(module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
上面的方案，可以将vue,vuex等这些基本不会变动的依赖从bundle.js中抽离出来，最开始的时候加载一次，可以起到缓存的作用供后续使用，但是有个缺陷，项目每次打包的时候还是会去抽离打包这些依赖。
为了提高打包时的速度，我们可以效仿window系统的.dll文件，dll 全称是：dynamic link library（动态链接库）。微软官方介绍 dll 的一个使用场景：windows 系统提供一个 dialog box 库，任何应用都可以直接引用。
build文件夹下面新建webpack.dll.conf.js
var path = require("path");
var webpack = require("webpack");
module.exports = {
// 你想要打包的模块的数组
entry: {
vendor: ['vue/dist/vue.esm.js', 'vuex', 'axios', 'vue-router', 'better-scroll', 'jsencrypt', 'qs']
},
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
}),
]
};
在package.json添加命令
"dll": "webpack --config ./build/webpack.dll.config.js"
打包前，我们执行 npm run dll
会在static/js目录下面生成 vendor.dll.js文件，在更目录生成 vendor.-manifest.json
然后在webpack.prod.conf.js文件中，引入webpack dll插件DefinePlugin
new webpack.DllReferencePlugin({
context: path.resolve(__dirname, '..'),
manifest: require('../vendor-manifest.json')
}),
这样在执行 npm run build的时候，会自动忽略之前通过 npm run dll 记录的依赖忽略项集合，加快打包
最后别往了在index.html中引入 生成的 vendor.dll.js（build前引入）
<script src="./static/js/vendor.dll.js"></script>
