This post is an optimized configuration for WebPack in Vue-CLI2.0.

1. Import components as needed

For example, introducing an Elemental-UI, which components are used

import {Button,Dialog} from 'element-ui';
Vue.use(Button); // Button component
Vue.use(Dialog); // Dialog component
Copy the code

2. The externals attribute

The Externals property of WebPack, which configments the public or infrequently changed third-party package name in the property, automatically ignores the packages in the package. The specific implementation is as follows:

In the build/webpack base. Conf. Js file:

module.exports = {
	externals: {
		Vue: 'Vue'.Axios: 'axios'}}// Where key-- corresponds to the import Axios name, value-- corresponds to the original method name
Copy the code

It needs to be introduced in the root directory, index.html

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
Copy the code

3. Given file matching range

Include specifies which files need to be processed

Enclude to exclude folders that do not need to be processed

{
	test: /\.js$/,
	loader: 'babel-loader'.include: [resolve('src')].exclude: /node_modules/
}
Copy the code

4. NoParse attribute

Filter out files that do not need to be parsed

{
	module: {
		noParse: /jquery/, rule: [ ... ] }}Copy the code

5. CacheDirectory Cache attribute

Babel-loader provides the cacheDirectory option parameter, which defaults to False.

When set to null or true, it will take advantage of the system’s temporary folder cache to Babel processed modules, which has a very large performance improvement for rebuild JS.

{
	test: /\.js$/,
	loader: 'babel-loader? cacheDirectory'.include: [resolve('src')].exclude: /node_modules/
}
Copy the code

6, happyPack multiple child processes are parallel

In the process of webpack packaging, loader converts JS, CSS, IMG and other files synchronously, one by one.

HappyPack works by splitting these tasks into multiple sub-processes, executing them in parallel, and sending the results to the main process when they are finished, thereby reducing the overall packaging time.

Step 1: Install

npm install happypack -D
Copy the code

Step 2: introduction and configuration changes the build/webpack base. Conf. Js file module. Rules configuration:

{
	test: /\.vue$/,
    loader: 'happypack/loader? id=happyVue'
},
{
	test: /\.js$/,
	loader: 'happypack/loader? id=happyBabel'.include: [resolve('src')].exclude: /node_modules/
}
Copy the code

Production environment if add the build/webpack. Prod. Conf. Js file configuration:

const vueLoaderConfig = require('./vue-loader.conf')
const HappyPack = require('happypack')
const os = require('os')
// Create a shared process pool
const HappyPackThreadPool = HappyPack.ThreadPool({size:os.cpus().length})
plugins: [...new HappyPack({
		id: 'happyVue'.// The HappyPack is used to process a particular type of file
		loaders: [{
			loader: 'vue-loader'.options: vueLoaderConfig
		}],
        threadPoll: HappyPackThreadPool
	}),
	new HappyPack({
		id: 'happyBabel'.loaders: ['babel-loader? cacheDirectory'].threadPoll: HappyPackThreadPool
	})
	...
]
Copy the code

7. Use DllPlugin and DllReferencePlugin

This method is independent of the WebPack configuration.

1. Create a new one under Buildwebpack.dll.conf.jsThe contents of the file are as follows:

const path = require('path')
const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    entry: {
        vendor: ['vue'.'vue-router']},output: {
        path: path.resolve('./static'),
        filename: '[name].dll.js'.library: '[name]'
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.resolve('./static'.'[name]-manifest.json'),
            name: '[name]'
        }),
        // It is recommended to compress the code, otherwise the DLL package will be too large.
        new UglifyJsPlugin()
    ]
}
Copy the code

The file is generated in the static directory.

2. In the build/webpack. Prod. Conf., js plugin to join the following configuration:

new webpack.DllReferencePlugin({
    manifest: require('.. /static/vendor-manifest.json')})Copy the code

3. Add shortcut commands to package.json:

"scripts": {
	"build": "node build/build.js"."build:dll": "webpack --config build/webpack.dll.conf.js"
}
Copy the code

4. Add a reference to the root directory index.html

<script type="text/javascript" src="./static/vendor.dll.js"></script>
Copy the code

When the production environment is packaged, run NPM run build: DLL to generate a file and then run NPM run build.

Unlike externals, sometimes projects will use packages that are not available on the NPM, in which case the DLLPlugin can be used as a separate file reference.