webpack 深入浅出分析之打包公共代码、代码分割和懒加载

小咪咪 2023-02-11 12:28 12阅读 0赞

#### 一、webpack 打包公共代码 ####

1.  创建一个空文件夹，通过 `npm init` 初始化创建 `package.json` 文件，通过 `npm install webpack --save-dev` 命令下载 `webpack`。
2.  创建 `src` 文件夹，里面创建 `moduleA.js`、`subPageA.js`和 `subPageB.js`，`moduleA.js`作为`subPageA.js`和 `subPageB.js`的公共组件。创建 `pageA.js` 和 `pageB.js` 文件，`subPageA.js`和 `subPageB.js` 作为`pageA.js` 和 `pageB.js`的公共页面，代码如下所示：

*  **moduleA.js**
    
        export default 'moduleA'
 *  **subPageA.js**
    
        import './moduleA'
        export default 'subPageA'
 *  **subPageB.js**
    
        import './moduleA'
        export default 'subPageB'
 *  **pageA.js**
    
        import './subPageA'
        import './subPageB'
        import * as _ from 'lodash'
        
        export default 'pageA'
 *  **pageB.js**

import './subPageA'
    import './subPageB'
    import * as _ from 'lodash'
    
    export default 'pageB'

1.  创建 `webpack.config.js` 文件，通过 `require` 引入 `webpack` 和 `path`。`entry`是配置入口文件，如果需要提取公共代码，就需要配置多个入口文件，`pageA` 和 `pageB` 是 `webpack`自己生成的公共代码，`vender` 是第三库生成的公共代码，里面是数组，可以存放多个第三库，在这里使用的是 `lodash`。`output` 是配置出口文件，`path`是指定打包后生成的文件夹为 `dist`，`filename` 是列在 `entry` 中，打包后输出的文件的名称，`chunkFilename` 是未列在 `entry`中，却又需要被打包出来的文件的名称，一般这个 `chunk`文件指的就是要懒加载的代码。在 `plugins` 中就可以进行提取第三方库的操作，通过 `new webpack.optimize.CommonsChunkPlugin({})` 就可以进行提取公共代码，当使用`name` 为 `vendor`， `minChunks` 为 `Infinity` 就不会把任何依赖的模块提取出来打包公用，提取第三方插件生成的公共代码。当 `name` 为 `manifest`， `minChunks` 为 `Infinity`，提取 `webpack` 生成的代码。当 `name` 为 `common`，`minChunks` 为 2， 出现两次以后就打包，`chunks` 为 `pageA` 和 `pageB`，打包的入口，将业务代码提取公共代码，代码如下所示：

var webpack = require('webpack')
    var path = require('path')
    
    module.exports = { 
        entry: { 
            'pageA': './src/pageA.js',
            'pageB': './src/pageB.js',
            "vender": ['lodash']
        },
        output: { 
            path: path.resolve(__dirname, './dist'),
            filename: '[name].bundle.js',
            chunkFilename: '[name].chunk.js'
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({ 
                name: 'vendor',
                minChunks: Infinity
            }),
            new webpack.optimize.CommonsChunkPlugin({ 
                name: 'manifest',
                minChunks: Infinity
            }),
            new webpack.optimize.CommonsChunkPlugin({ 
                name: 'common',
                minChunks: 2,
                chunks: ['pageA', 'pageB']
            })
        ]
    }

#### 二、webpack 代码分割和懒加载 ####

1.  在 `webpack` 项目中，我们需要代码分割，分离业务代码和第三方依赖，分离业务代码和业务公共代码 和 第三方依赖，分离首次加载和访问后加载的代码等。
2.  创建一个空文件夹，通过 `npm init` 初始化创建 `package.json` 文件，通过 `npm install webpack --save-dev` 命令下载 `webpack`。
3.  创建 `src` 文件夹，里面创建 `moduleA.js`、`subPageA.js`和 `subPageB.js`，`moduleA.js`作为`subPageA.js`和 `subPageB.js`的公共组件。创建 `pageA.js` 和 `pageB.js` 文件，`subPageA.js`和 `subPageB.js` 作为`pageA.js` 和 `pageB.js`的公共页面。在`pageA.js` 和 `pageB.js`中，进行代码分割，使用 `import` 引入页面，同时也会执行，`require.ensure` 引入页面，但是不执行，代码如下所示：
    
     *  **moduleA.js**

export default 'moduleA'

*  **subPageA.js**
    
        import './moduleA'
        export default 'subPageA'
 *  **subPageB.js**
    
        import './moduleA'
        export default 'subPageB'
 *  **pageA.js**
    
        import * as _ from 'lodash'
          
          var page = 'subPageA'
          
          if (page === 'subPageA') { 
              import('./subPageA').then(function(subPageA) { 
                  console.log(subPageA)
              })
          } else if (page === 'subPageB') { 
              import('./subPageB').then(function(subPageB) { 
                  console.log(subPageB)
              })
          }
        
          export default 'pageA'
 *  **pageB.js**

import * as _ from 'lodash'
      
      var page = 'subPageB'
      
      if (page === 'subPageA') { 
          import('./subPageA').then(function(subPageA) { 
              console.log(subPageA)
          })
      } else if (page === 'subPageB') { 
          import('./subPageB').then(function(subPageB) { 
              console.log(subPageB)
          })
      }
      
      export default 'pageB'

1.  创建 `webpack.config.js` 文件，通过 `require` 引入 `webpack` 和 `path`。`entry`是配置入口文件，如果需要提取公共代码，就需要配置多个入口文件，`pageA` 和 `pageB` 是 `webpack`自己生成的公共代码，`vender` 是第三库生成的公共代码，里面是数组，可以存放多个第三库，在这里使用的是 `lodash`。`output` 是配置出口文件，`path`是指定打包后生成的文件夹为 `dist`，`filename` 是列在 `entry` 中，打包后输出的文件的名称，`chunkFilename` 是未列在 `entry`中，却又需要被打包出来的文件的名称，一般这个 `chunk`文件指的就是要懒加载的代码，`publicPath` 是公共的打包路径，为 `dist` 目录。在 `plugins` 中，通过 `new webpack.optimize.CommonsChunkPlugin({})` 就可以进行提取公共代码，当 `name`的值为数组，里面是 `manifest` 和 `vendor`，`minChunks`为 `Infinity`，说明打包生成自己的公共代码以及第三方库的代码。当 `async` 为 `async-common`，`minChunks` 为 2， `children` 为 `true`，说明打包异步共同提取出，两个公共打包文件，两个页面之间进行子依赖，代码如下所示：

var webpack = require('webpack')
    var path = require('path')
    
    module.exports = { 
        entry: { 
            'pageA': './src/pageA.js',
            'pageB': './src/pageB.js',
            "vender": ['lodash']
        },
        output: { 
            path: path.resolve(__dirname, './dist'),
            publicPath: './dist/',
            filename: '[name].bundle.js',
            chunkFilename: '[name].chunk.js'
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({ 
                name: ['manifest', 'vendor'],
                minChunks: Infinity
            }),
            new webpack.optimize.CommonsChunkPlugin({ 
                async: 'async-common',
                minChunks: 2,
                children: true
            })
        ]
    }