vue 项目编译、打包优化

这是我参与更文挑战的第1天，活动详情查看： 更文挑战

1、使用HappyPack优化

happypack： 是 webpack 的一个插件，目的是通过多进程模型，来加速代码构建，目前我们的线上服务器已经上线这个插件功能，并做了一定适配，效果显著。

1. 安装： npm install happypack --save-dev

2. 配置base.config.js

const HappyPack = require('happypack');
var happyThreadPool = HappyPack.ThreadPool({
	size: os.cpus().length
});
module.exports = {
    rules: [
    {
				test: /\.js$/,
				loader: 'happypack/loader?id=happybabel',
				exclude: /node_modules/
			},
    ],
    plugins: [
		new HappyPack({
			id: 'happybabel',
			loaders: ['babel-loader'],
			threadPool: happyThreadPool,
			verbose: true
		})
    ],
}

2、使用vue-cli-plugin-dll

1. 安装： yarn add vue-cli-plugin-dll

2. 使用 clean-webpack-plugin 清除之前冗余的dll文件

   npm install --save-dev clean-webpack-plugin

3. 创建文件webpack.dll.conf.js,内容如下

const path = require("path")
const webpack = require("webpack")
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

// dll文件存放的目录
const dllPath = "public/vendor"

module.exports = {
	entry: {
		// 需要提取的库文件-破烂项目啥都有用
		vendor: ["vue", "vue-router", "vuex", "axios", "iView", "js-cookie", "element-ui", "echarts", "highcharts",
			"v-charts", "area-data", "mux.js", "jquery", "mockjs", "html2canvas", "iview-area", "view-design"
		]
	},
	output: {
		path: path.join(__dirname, dllPath),
		filename: "[name].dll.js",
		// vendor.dll.js中暴露出的全局变量名
		// 保持与 webpack.DllPlugin 中名称一致
		library: "[name]_[hash]"
	},
	plugins: [
                // 清除之前的dll文件
                new CleanWebpackPlugin(),
		// 设置环境变量
		new webpack.DefinePlugin({
			"process.env": {
				NODE_ENV: JSON.stringify('production')
			}
		}),
		// manifest.json 描述动态链接库包含了哪些内容
		new webpack.DllPlugin({
			path: path.join(__dirname, dllPath, "[name]-manifest.json"),
			// 保持与 output.library 中名称一致
			name: "[name]_[hash]",
			context: process.cwd()
		})
	]
}

4. 生成dll,在 package.json 中加入如下命令

"scripts": {
    ...
    "dll": "webpack -p --progress --config ./webpack.dll.conf.js"
},

5. 运行下面命令，生成public下的文件

   npm run dll

   注意：只要运行 npm run dll 命令打包一次即可，除非配置文件改变，需要再次打包第三方js，同时也需要修改在 index.html 中的引入文件。

6. base.config.js 配置,忽略已编译文件

    plugins: [
	new webpack.DllReferencePlugin({
            context: path.resolve(__dirname, '..'),
            manifest: require('./public/vendor/vendor-manifest.json')
        })
    ],
    

7、index.html 中加载生成的 dll 文件

<script src="./build/public/vendor/vendor.dll.js"></script>