This is the first day of my participation in Gwen Challenge

1. Optimize with HappyPack

Happypack: happypack is a plugin for Webpack, which aims to speed up code building through the multi-process model.

  1. NPM install happypack –save-dev

  2. Configuration 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}})],Copy the code

2. Use vuE-CLI-plugin-DLL

  1. Installation: YARN add vue-cli-plugin-dll

  2. Use the clean-webpack-plugin to clean up the previously redundant DLL files

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

  3. Create the file webpack.dll.conf.js with the following contents

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

// Directory for storing DLL files
const dllPath = "public/vendor"

module.exports = {
	entry: {
		// Library files that need to be extracted - junk projects are useful for anything
		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".// Global variable name exposed in vendor.dll.js
		// Keep the same name as webpack.dllPlugin
		library: "[name]_[hash]"
	},
	plugins: [
                // Clear the previous DLL file
                new CleanWebpackPlugin(),
		// Set environment variables
		new webpack.DefinePlugin({
			"process.env": {
				NODE_ENV: JSON.stringify('production')}}),// manifest.json describes what the dynamic link library contains
		new webpack.DllPlugin({
			path: path.join(__dirname, dllPath, "[name]-manifest.json"),
			// keep the same name as output.library
			name: "[name]_[hash]".context: process.cwd()
		})
	]
}

Copy the code
  1. Generate a DLL and add the following command to package.json
"scripts": {..."dll": "webpack -p --progress --config ./webpack.dll.conf.js"
},
Copy the code

  1. Run the following command to generate the file under public

    npm run dll

    Note: just run the NPM run DLL command to package once, unless the configuration file changes and you need to package the third-party JS again, you also need to modify the imported file in index.html.

  2. Base.config.js configuration, ignoring compiled files

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

7. Load the generated DLL file in index.html

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