Webpack4 Learning (2) – Optimization

HMR hot update

When a module changes, only that module is packaged. Style file: with style-loader internal implementation HMR JS file: default does not implement HMR HTML file: default does not implement HRM

• css HMR

module.exports={
  module: {rules:[
      {
        test:/\.css$/,
        use:[
          'style-loader'.// Support host to implement CSS hot update
          'cass-loader']]}},devServer: {hot:true}}Copy the code

• HTML HMR

// import an HTML file. HTML is a file without implementing HMR
module.exports={
  entry: ['./index.js'.'./index.html'].devServer: {host:true}}Copy the code

• js HMR

Only non-entry files are processed

// index.js files embed code
if(module.hot){
 // HMR is enabled
 module.hot.accept('./modulePath'.function(){
   // Listen for module changes. Once changes occur, other modules are not repackaged.
   // This callback will be executed})}Copy the code

source-map

Provides source – to – build code mapping technology

[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

• inline: map.js is inlined, most not in the code. Increase file size
• eval: map.js is inline and embedded after each file code. Increase file size
• cheap: Locate the row
• moduleWill:loaderSouce Map added

oneof

Laoder in Oneof will only use one

module.exports={
  module: {rules:[
      {
      // Only one loader will match each timeOneOf: [{test:/\.css$/,
            use:[
              'style-loader'.'css-loader']}]}}Copy the code

Multi-process packaging

The process startup time is 600ms, and the process communication time is also required. Therefore, the loader that takes a long time needs multi-process packaging

// npm i thread-loader
module.exports={
  module: {rules:[
      {
        test:/\.js$/,
        use:[
          {
            loader:'thread-loader'.// The number of CPU cores can be set. By default, the number of CPU cores is -1
            options: {workers:2 2 / / process}}'babel-loader'}]}}Copy the code

The cache

• Babel cache

module.exports={
  module: {rules:[
      {
        test:/\.js$/,
        loader:'babel-loader'.options: {cacheDirectory:true}}]}}Copy the code

• File resource cache
  • [hash]Each Webpack build generates a uniquehash, repack each timehashWill be changed. The cache is invalid
  • [chunkhash]: according to thechunkgeneratehashIf the packets are from the same sourcechunk.hashIt’s the same thing,cssinjsIs introduced into the samechunk.
  • [contenthash]: Generated based on contenthash.

Production uses contenthash file packaging + server cache for use

tree shaking

Remove useless code

• Conditions: Usees6Modular,mode='production'
• Some versions may remove the required code

//package.json
{
  "sideEffects":false // All code is tree shaking
  // will remove.css @babel/polyfill etc. from files that are not directly called
}
//package.json
{
  "sideEffects": ["*.css"."*.less"] // Do not delete the file
}
Copy the code

code split

• Multiple entrances, multiple exits

import { resolve } from 'path';
module.exports={
  entry: {mian:'./src/main.js'.index:'./src/index.js'
  },
  output: {filename:'js/[name].[contenthash:10].js'.path:resolve(__dirname,'dist')}}Copy the code

• optimizationThe third-party modules are packaged separately

module.exports={
  entry:'./src/index.js'.output: {filename:'js/[name].[contenthash:10].js'.path:resolve(__dirname,'dist')},optimization: {splitChunks: {chunks:'all'}},/* Pack the hash of the current module into a separate file, so that the contenthash changes when the content of the file changes, resulting in the content of the js file that applies this module
  runtimeChunk: {name:entrypoint= >`runtime-${entrypoint.name}`}}Copy the code

• jsImplementation code separation

webpack.config.js

module. Exports = {entry:'./src/index.js'.output: {filename:'js/[name].[contenthash:10].js'.path:resolve(__dirname,'dist')}},Copy the code

index.js

import(/webpackChunkName:'test'/'./test.js');
console.log('index')
// Create two js files
Copy the code

Lazy loading preloading

• Lazy loading: Loading when needed

document.querySelector('.btn').onClick=function(){
  import(/*webpackChunkName:'test'*/'./test.js')}Copy the code

• Preloading: Loading files at idle time after loading other resources (poor compatibility)

document.querySelector('.btn').onClick=function(){
  import(/*webpackChunkName:'test',webpackRrefetch:true*/'./test.js')}Copy the code

dll

Package third-party libraries separately

// webpack.dll.config.js
const { resolve } = require('path');
const  webpack = require('webpack');
module.exports={
  entry: {/* Vendor finally generates the name of the package to be typed ['moment'] */
    vendor: ['moment'],}output: {filename:'[name].js'.path:resolve(__dirname,'dll'),
      library:'[name]_[hash]' // The name of the exposed content
    },
    plugins: [// Generates a manifest.json --> provides mapping to packages
      new webpack.DllPlugin({
        name:'[name]_[hash].js'.path:resolve(__dirname,'dll/mainfest.json')})],mode:'production'
}
// package.json
webpack --config webpack.dll.config.js
Copy the code

Webpack excludes packaged third-party libraries and automatic HTML import

const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
module.exports={
  plugins: [new webpack.DllReferencePlugin({
      manifest: resolve(__dirname,'dll/manifest.json')}),// Automatically import resources in HTML
    new AddAssetHtmlWebpackPlugin({
      filePath:resolve(__dirname,'dll/vendor.js')]}})Copy the code

externals

module.exports={
   // Reject incoming packets
  externals: {// Package name: the package name downloaded by NPM
    jquery:'jQuery'}}Copy the code