Webpack Performance Optimization-combat

Off- topic: Early Project reconstruction on-line, the project technology stack using Vue+webpack, test to carry out the entire packaging process takes 10 minutes, but also because of the three channels involved, the deployment of a good environment for half an hour, which seriously delayed the progress of the line, so improve webpack construction efficiency, Become one of the shutdowns that improve team development efficiency.

Body:

I. Extracting a project configuration file

Because the project is separated from the front and back ends, the interface address needs to be configured, without taking into account the separation configuration file, resulting in three packages per package.

Basic idea (Baidu): Put the configuration information in the window, and then write in a non-packaged JS, the page introduced this JS

1. In the dist/static/js/directory, create a new config.js with the content:

WINDOW.G = {    ' http://localhost:8088/'}

2. Introduction of the file in the *.html file

<script type= "Text/javascript" src= "/static/js/config.js" ></script>

3. The above method of Baidu is not very applicable to the company project.

Reasons: (1) The company project is a multi-page application, dozens of pages, manually add script tag is a bit cumbersome, it is not conducive to change.

(2) The Cleanwebpackplugin plugin is used to empty the Dist directory before each package, and the new config.js is deleted.

Workaround:

Inject a script tag into HTML using the Webpack plugin Add-asset-html-webpack-plugin

// under Project Root/config/, create a new config.js var Addassethtmlplugin = require (' Add-asset-html-webpack-plugin '); plugins:    [new  Addassethtmlplugin ([{        '). /config ', ' config.js '),// file Local address        outputPath:utils.assetsPath (' js '),//  File output address        publicpath: '/static/js/',// The address referenced in the tag is        false    }] )]

Originally to use this plugin to inject dllplugin third-party dependent libraries, but because the actual operation is not improved packaging efficiency, it is used in the separation of configuration files.

Two. Using Aliases for redirection

Three. Optimize loader configuration

Webpack Performance Optimization-combat