标签：index code splitting js webpack webpack4 path vendors 打包

demo 代码点此，webpack4 进行 code splitting 使用 split-chunks-plugin, 开始前先做点准备工作。

start

安装：

npm i -D webpack webpack-cli
npm i -S lodash

创建 webpack.config.js 进行配置：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './index.js',
  },
  optimization: {
    // code splitting settings
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          // 仅将 node_modules 下的代码打包进 vendors.js
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          filename: 'vendors.js',
        },
      },
    },
  },
  // 出口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

创建 index.js ：

// 引入 lodash
import _ from 'lodash';

console.log(_.chunk(['a', 'b', 'c', 'd'], 2));

打包终端执行 npx webpack进行打包，打开 dist 目录，可以看见 bundle.js 和 vendors.js，引入的 lodash 被打包到 vendors 中。

公共模块

如果 index.js 引入了公共模块，则可以将此模块进行打包。

修改配置：

// webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './index.js',
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      // 代码文件大于 0kb 就进行打包
+     minSize: 0,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          filename: 'vendors.js',
        },
+       default: {
+         // 公共模块仅引用 1 次也打包进 common.js
+         minChunks: 1,
+         priority: -20,
+         reuseExistingChunk: true,
+         filename: 'common.js',
+       }
      }
    }
  },
  // 出口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

然后创建一个 math.js:

// math.js

export default function add (x, y) {
  return x + y;
}

接着修改 index.js:

// inddex.js

import add  from './math';
console.log(add(1, 2));

执行npx webpack进行打包，打开 dist 目录，可以看见 math.js 被打包进 common.js 中了。

异步代码

打包异步代码需要使用 import(...)语法，所以需要配置一下 babel。

安装：

npm i -D babel-loader @babel/core babel-plugin-dynamic-import-webpack

配置一下 webpack.config.js：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './index.js',
  },
  module: {
    rules: [{
      test: /\.js/,
      use: [{
        loader: 'babel-loader', 
        options: {
          "babelrc": false,
          "plugins": [
            "dynamic-import-webpack"
          ]
        }
      }]
    }]
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 0,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          // filename: 'vendors.js',
        },
        default: {
          minChunks: 1,
          priority: -20,
          reuseExistingChunk: true,
          // filename: 'common.js',
        }
      }
    }
  },,
  output: {...},
}

修改 index.js:

// index.js

async function getComponent() {
  const { default: _ } = await import('lodash');
  const element = document.createElement('div');
  element.innerHTML = _.join(['hello', 'world'], '-');
  return element;
}

getComponent().then(element => {
  document.body.appendChild(element);
})

执行打包，可以看见 import(...) 异步加载的 lodash 被打包成 0.bundle.js。

标签：index,code,splitting,js,webpack,webpack4,path,vendors,打包
来源： https://www.cnblogs.com/guolao/p/11256275.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。