17.webpack优化配置-code split 代码分割

webpack会将所有依赖的文件打包到一个文件中，即bundle.js文件，当一个项目慢慢变得复杂的时候会导致这个bundle.js文件越来越大，浏览器加载的速度也会越来越慢，可以使用代码分割来将不同代码单独打包成不同文件。

方式一：通过多入口实现代码分割

配置webpack, 将单入口，改为多入口
注意：index.js文件不要引入base.js文件

const path = require('path');

module.exports = {
    
    
    mode: 'production',
    entry: {
    
    
        index: './src/js/index.js',
        base: './src/js/base.js'
    },
    output: {
    
    
        filename: 'js/[name][contenthash:8].js',
        path: path.resolve(__dirname, 'bulid'),
    }
}

方式二：通过optimization将公共代码单独打包

• 该方式可以将node_modules中代码单独打包一个chunk最终输出

• 会自动分析多入口chunk中，有没有公共的文件，如果有会将公共文件打包成一个单独的chunk

• 该方式可以对单入口文件使用，也可以对多入口文件使用。

• 注意： 被动态导入的文件如base.js文件内容被修改后，hash值会更改，但是index.js打包生成的main156g2sa.js文件中会记录base.js的hash值，导致index.js的打包文件的的hash值也更改。

  解决方法：可以使用runtimeChunk选项使index.js打包生成的main.js不记录base.js生成的hash值，而是将hash值单独放入到一个文件中。

1. 安装jquery

   npm i jquery --save
   

2. 入口文件index.js

   import $ from 'jquery';
   function fn(x, y){
         
         
       return x * y;
   }
   

3. base.js文件

   import $ from 'jquery';
   const add = (x, y) => x + y;
   add(2, 5);
   

4. webpack配置文件

   const path = require('path');
   
   module.exports = {
         
         
       mode: 'production',
       entry: {
         
         
           index: './src/js/index.js',
           base: './src/js/base.js'
       },
       output: {
         
         
           filename: 'js/[name][contenthash:8].js',
           path: path.resolve(__dirname, 'bulid'),
       },
       optimization:{
         
         
       	//被注释的代码不是必须的，可以根据自己需求开启
           splitChunks:{
         
         
               chunks: 'all',
           },
            //将当前模块记录其他模块的hash单独打包为一个文件runtime
           runtimeChunk:{
         
         
   			name: entrypoint => `runtime-${
           
           entrypoint.name}`
   		},
       }
   }
   

5. 进行打包

   webpack
   

6. 最终会打包出三个文件，base.js生成的文件，index.js生成的文件，和jquery生成的文件

方式三：import动态导入

• 通过import动态导入语法，将某个文件单独打包。
• 可以实现单入口

1. webpack.config.js文件

   const path = require('path');
   
   module.exports = {
         
         
       mode: 'production',
       entry: './src/js/index.js',
       output: {
         
         
       	//[name]默认是chunks
           filename: 'js/[name][contenthash:8].js',
           path: path.resolve(__dirname, 'bulid'),
       },
       optimization:{
         
         
           splitChunks:{
         
         
               chunks: 'all'
           },
           //将当前模块记录其他模块的hash单独打包为一个文件runtime
           runtimeChunk:{
         
         
   			name: entrypoint => `runtime-${
           
           entrypoint.name}`
   		},
       }
   }
   

2. 入口文件index.js

   import $ from 'jquery';
   
   //加载base.js文件，返回promise
   //webpackChunkName是将打包后的文件名以base开头，相同的webpackChunkName将被打包到一个文件中
   //base.js文件一定要进行导出(export)
   import( /* webpackChunkName: 'base' */ './base').then((result) => {
         
         
       console.log(result);
   }).catch(() => {
         
         
       console.log('base.js加载失败！');
   });
   
   function fn(x, y) {
         
         
       return x * y;
   }
   

3. 打包

   webpack
   

4. 打包信息