Catalog

One 、source-map

source-map Error checking

​​ Two 、oneOf

3、 ... and 、 install jQuery Plug in and jQuery package

Four 、externals

5、 ... and 、 Yes css Package and compress the file

6、 ... and 、webpack performance optimization -tree shaking( Trees shake )

1、 Use ES6 modularization      

2、 Turn on **production** Environmental Science

​ 7、 ... and 、code split（ The code segment ）

Why use code segmentation ？

The first method ： Multi entry split

  The second method ：optimization

  The third method ：import Dynamic import Syntax

---

One 、source-map

source-map Error checking

To configure sourve-map Configure before css Compatibility writing

source-map： One provides Mapping of source code to post build code Technology （ If the code goes wrong after the build , Source code errors can be traced by mapping ）

Use the examples in the previous chapter to demonstrate ： Please refer to webpack Package nanny tutorial 01

stay webpack.config.js Add devtool:'source-map' 

devtool: 'eval-source-map'

  Added two troubleshooting files map 

Two 、oneOf

Speed up packing , hold rules All the contents in it are {oneOf：[]}

 

  Run again

 npx webpack-dev-server

---

3、 ... and 、 install jQuery Plug in and jQuery package

npm install jquery --save-dev 

introduce jQuery：

import $ from 'jquery';
console.log($);

  package ：

stay node_moddules Found already in the folder jQuery That is success  

 

  Run it ：

 npx webpack-dev-server

  But if you introduce too many files, such as charts unitApp Waiting for a series of documents will lead to main.js Particularly large , The opening speed will also slow down . It needs to be solved at this time

Four 、externals

externals： Let some libraries not be packaged .

webpack.config.js Middle configuration ： Delete the comments when using

externals: {
  //  Refuse jQuery Packed in ( adopt cdn introduce , It will be faster )
  //  Ignored library name  -- npm Package name 
  jquery: 'jQuery'
}

  Then it needs to be in index.html Pass through cdn To introduce ：

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

  introduce jquery.js The library can use cat cloud to get the path

 

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 

Can pass npx webpack-dev-server To run and view the size

Before compression ：main.js by 555kib

  After the compression ：main.js by 273kib

5、 ... and 、 Yes css Package and compress the file

npm install css-minimizer-webpack-plugin --save-dev

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");// Compress css

 new CssMinimizerPlugin(),// New compression css Method 

Just pack it  

6、 ... and 、webpack performance optimization -tree shaking( Trees shake )

tree shaking： Remove useless code not used in the application

Premise ：

1、 Use ES6 modularization      

You can use import,export. require Can not be

2、 Turn on **production** Environmental Science

This will automatically remove the useless code  

effect ： Reduce code size

If js Introduce add, No introduction mul. But it's all packed in , It shows that there is a problem here

  resolvent ： Remove useless code by shaking the tree

Back to the editor , stay mathUtils.js Code before comments in

Write separately ES6 grammar

export function add(num1,num2){
  return num1 + num2
}
export function mul(num1,num2){
  return num1 * num2
}

  If this is development

process.env.NODE_ENV = 'developent'

  Let's pack it here. Can we pack it out

  You can see that the package has been successfully completed , But I just want to introduce add, I don't want to introduce mul. You need to introduce... Through tree shaking

  hold mode Switch to production

  Pack it up , You can see that there is mul

Note here mul 

  Pack again , You will find that you can't find mul 了

And it will automatically clear your comments

stay package.json Middle configuration ：

"sideEffects": false Indicates that all code has no side effects （ All can be done tree shaking）

This can lead to problems ： May put css / @babel/polyfill File crowding out （ side effect ）

So it can be configured "sideEffects": ["*.css", "*.less"]： It won't be right css/less file tree shaking Handle

7、 ... and 、code split（ The code segment ）

Why use code segmentation ？

stay vue Single page application , If nothing is done , all vue The file will be packaged as a file , This file is very large , It causes the web page to enter slowly for the first time . After code segmentation , Will separate the code into different bundle in , Then load these files on demand , It can improve the speed of the first entry of the page , Website performance can also be improved .

As the application expands , package （bunle） It gets bigger and bigger . Especially if a huge third-party library is introduced . You must pay attention to the size of the package you introduce . Prevent you from packing ,app Loading takes too long .

To prevent a big bag from coming out , Code segmentation is a better solution . Code segmentation is Webpack and Browserify（ adopt factor-bundle） A feature of . Allow to create multiple packages , And then at run time (runtime) load .

Code segmentation can help App Realization 『 Lazy loading 』 The part that the current user needs , You don't have to load all . In this way, dynamic loading can improve application performance .

In short, it is to put a js Split into multiple small js Then run at the same time , Similar to asynchronous operation

The first method ： Multi entry split

hold mathUitls.js Put the name in its webpack.config.js In the entry file of ：

  entry: {
    index: './src/index.js',
    mathUtils: './src/mathUtils.js'
  },

  output: {
    // [name]： Take file name 
    filename: 'js/[name].[contenthash:10].js',
    path: path.resolve(__dirname, 'dist')
  },

  After packing, it can be separated

 

  The second method ：optimization

optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },

all： Take everything apart  

！！！ Be careful ：

 

 

  Because usually only one entry file will be introduced into the project .

So you can pack

 

 

 output.filename  The output file name of is  [name].min.js,[name]  according to  entry  The configuration of is inferred as  index, So the output is  index.min.js;

  The third method ：import Dynamic import Syntax

  If it is ordinary packaging, it will mathUtils.js Package files to index.js In the document

So we can use dynamic import syntax to export it separately  

import('./mathUtils').then(({add,mul})=>{
    console.log(add(300,200));
}).catch(()=>{
    console.log(' File load failed ');
})

Pack again  

  But here you will find that just looking at the name can't tell which is right and which

So add a comment webpackChunkName

/*webpackChunkName:'mathUtils'*/

   webpackChunkName: Appoint test Name of the file packaged separately

import(/*webpackChunkName:'mathUtils'*/'./mathUtils').then(({add,mul})=>{
    console.log(add(300,200));
}).catch(()=>{
    console.log(' File load failed ');
})

Pack again npm run build

You can see that the name has been changed