Build speed

  • Update the NPM version
  • Optimize the packaging speed of Babel-Loader
// Development environment
{
    test: /\.js$/./ / cache
    use: ['babel-loader? cacheDirectory'].// Define the scope
    include: srcPath,
    exclude: /node_modules/
}
Copy the code
  • IgnorePlugin
// Production environment
// Development environment
// Avoid introducing invalid modules
// Ignore the /locale directory under moment and ignore all language packages
new webpack.IgnorePlugin(/\.\/locale/./moment/),
// Custom import the required language pack
import 'moment/locale/zh-cn'

Copy the code
  • noParse
// Production environment
// Avoid repacking
module.export = {
    module: {// Ignore some xxx.min.js files that are already packaged and compressed
      noParse: [/react\.min\.js$/]}}Copy the code
  • happyPack
// Production environment
// Multiprocess packaging
//module
{
    test: /\.js$/.// Pass processing of.js files to HappyPack instance Babel
    use: ['happypack/loader? id=babel'].include: srcPath,
    // exclude: /node_modules/
},
//plugin
new HappyPack({
    // The HappyPack is used to process a particular class of files
    id: 'babel'.// How to handle.js files as in the Loader configuration
    loaders: ['babel-loader? cacheDirectory']}),Copy the code
  • parallelUglifyPlugin
// Production environment
// WebPack has built-in Uglify tool compression
// Multiprocess compression js
ParallelUglifyPlugin to compress the output JS code
new ParallelUglifyPlugin({
    // The argument passed to UglifyJS
    // (still using UglifyJS compression, but helps start multi-processes)
    uglifyJS: {
    output: {
        beautify: false.// The most compact output
        comments: false.// Delete all comments
        },
    compress: {
        // Delete all 'console' statements, compatible with Internet Explorer
        drop_console: true.// Insert variables that are defined but used only once
        collapse_vars: true.// Extract static values that occur multiple times but are not defined as variables to reference
        reduce_vars: true,}}})// Starting multiple processes can improve the packing speed of large projects
// If the project is small, starting multiple processes will reduce speed (process overhead)
Copy the code
  • Dllplugin
// Development environment
// Dynamic link library plug-in
Copy the code
  • Automatically refresh
watch: true.// Enable listening (default: false)
watchOptions: {
    ignored: /node_modules/.// Ignore which ones
    // After listening for changes, wait for 300ms before performing the action, in case the file is updated too fast and the recompile frequency is too high
    aggregateTimeout: 300.// Check whether a file has changed by asking the system whether the specified file has changed
    poll: 1000
}
Copy the code
  • Hot update
// Cannot be used in production environment
// Automatic refresh: the whole page is refreshed, the speed is slow, and the page data disappears
// Hot update: the new code takes effect, the page is not refreshed, and the data is not lost
new HotModuleReplacementPlugin()
devServer: {
    hot:true
}
// Add the code logic after the hot update is enabled
if (module.hot) {
    module.hot.accept(['./math'].() = > {
        const sumRes = sum(10.30)
        console.log('sumRes in hot', sumRes)
    })
}
Copy the code

Output code optimization

  1. A smaller
  2. Reasonable subcontracting, put forward repetitive logic
  3. It is faster and uses less memory
  • Small image Base64 encoded URL-loader
  • Hash the path from the bundle
  • Lazy loading
  • Extract common code
  • IgnorePlugin
  • The CDN to accelerate
  • The use of production
// Automatic compression code UglifyPlugin
// Automatically remove debugging code
// Automatically start tree-shaking (removing unused code)Condition: It must be in ES Module, not commonJSmode: production
Copy the code
The differences between ES Module and Commonjs are as follows: 1. The ES Module is introduced statically, at compile time, so import can only introduce the dynamic reference of 2.Commonjs at the top, and the specification of static reference is introduced at execution timeCopy the code
  • Using the Scope Hosting
// Combine multiple functions into a single function
new ModuleConcatenationPlugin()
Copy the code