在 Webpack 中执行代码分割

作者 : 开心源码 本文共3375个字,预计阅读时间需要9分钟 发布时间: 2022-05-12 共145人阅读

有三种常使用的代码分离方法:

  • 入口起点:用 entry 配置手动地分离代码。
  • 防止重复:用 CommonsChunkPlugin 去重和分离 chunk。
  • 动态导入:通过板块的内联函数调使用来分离代码。

1、入口起点

这是迄今为止最简单、最直观的分离代码的方式。不过,这种方式手动配置较多

webpack.config.js

  1. const path = require('path');
  2. const HTMLWebpackPlugin = require('html-webpack-plugin');
  3. module.exports = {
  4. entry: {
  5. index: './src/index.js',
  6. another: './src/another-module.js'
  7. },
  8. plugins: [
  9. new HTMLWebpackPlugin({
  10. title: 'Code Splitting'
  11. })
  12. ],
  13. output: {
  14. filename: '[name].bundle.js',
  15. path: path.resolve(__dirname, 'dist')
  16. }
  17. };

这将生成如下构建结果

  1. Hash: 309402710a14167f42a8
  2. Version: webpack 2.6.1
  3. Time: 570ms
  4. Asset Size Chunks Chunk Names
  5. index.bundle.js 544 kB 0 [emitted] [big] index
  6. another.bundle.js 544 kB 1 [emitted] [big] another
  7. [0] ./~/lodash/lodash.js 540 kB {0} {1} [built]
  8. [1] (webpack)/buildin/global.js 509 bytes {0} {1} [built]
  9. [2] (webpack)/buildin/module.js 517 bytes {0} {1} [built]
  10. [3] ./src/another-module.js 87 bytes {1} [built]
  11. [4] ./src/index.js 216 bytes {0} [built]

正如前面提到的,这种方法存在少量问题:

  • 假如入口 chunks 之间包含重复的板块,那些重复板块都会被引入到各个 bundle 中。
  • 这种方法不够灵活,并且不能将核心应使用程序逻辑进行动态拆分代码。

2、防止重复

CommonsChunkPlugin 插件可以将公共的依赖板块提取到已有的入口 chunk 中,或者者提取到一个新生成的 chunk。让我们用这个插件,将之前的示例中重复的 lodash 板块去除:

webpack.config.js

  1. const path = require('path');
  2. + const webpack = require('webpack');
  3. const HTMLWebpackPlugin = require('html-webpack-plugin');
  4. module.exports = {
  5. entry: {
  6. index: './src/index.js',
  7. another: './src/another-module.js'
  8. },
  9. plugins: [
  10. new HTMLWebpackPlugin({
  11. title: 'Code Splitting'
  12. – })
  13. + }),
  14. + new webpack.optimize.CommonsChunkPlugin({
  15. + name: 'common' // 指定公共 bundle 的名称。
  16. + })
  17. ],
  18. output: {
  19. filename: '[name].bundle.js',
  20. path: path.resolve(__dirname, 'dist')
  21. }
  22. };

这里我们用 CommonsChunkPlugin 之后,现在应该可以看出,index.bundle.js 中已经移除了重复的依赖板块。需要注意的是,CommonsChunkPlugin 插件将 lodash 分离到单独的 chunk,并且将其从 main bundle 中移除,减轻了大小。执行 npm run build 查看效果:

  1. Hash: 70a59f8d46ff12575481
  2. Version: webpack 2.6.1
  3. Time: 510ms
  4. Asset Size Chunks Chunk Names
  5. index.bundle.js 665 bytes 0 [emitted] index
  6. another.bundle.js 537 bytes 1 [emitted] another
  7. common.bundle.js 547 kB 2 [emitted] [big] common
  8. [0] ./~/lodash/lodash.js 540 kB {2} [built]
  9. [1] (webpack)/buildin/global.js 509 bytes {2} [built]
  10. [2] (webpack)/buildin/module.js 517 bytes {2} [built]
  11. [3] ./src/another-module.js 87 bytes {1} [built]
  12. [4] ./src/index.js 216 bytes {0} [built]

以下是由社区提供的,少量对于代码分离很有帮助的插件和 loaders:

  • ExtractTextPlugin: 使用于将 CSS 从主应使用程序中分离。
  • bundle-loader: 使用于分离代码和推迟加载生成的 bundle。
  • promise-loader: 相似于 bundle-loader ,但是用的是 promises。

CommonsChunkPlugin 插件还可以通过用显式的 vendor chunks 功能,从应使用程序代码中分离 vendor 板块。

3、动态导入

当涉及到动态代码拆分时, 一般用用webpack提供的符合 ECMAScript 提案 的 import() 语法。

new Vue({

  1. el: '#app',
  2. components: {
  3. AsyncComponent: () => import('./AsyncComponent.vue')
  4. }
  5. });

实施代码分割并不难,难在搞清楚在什么时候、什么地方进行。

Vue.js 单页应使用进行代码分割有三种思路:

  • 按页面分割
  • 用折叠
  • 按条件分割

1. 按页面

按页面来进行代码分割,是最显著的一种方式。

假如能确保每个单文件组件代表一个页面,如 Home.vue, About.vue 以及 Contact.vue,那么我们即可以用 Webpack 的 “动态导入” 函数 (import) 来将它们分割至单独的构建文件中。之后后,当使用户访问一个新页面的时候,Webpack 将异步加载该请求的页面文件。

假如使用到了 vue-router,因为页面已经分割成了单独的组件,实施起来会非常方便。

  1. const Home = () => import(/* webpackChunkName: “home” */ './Home.vue');
  2. const About = () => import(/* webpackChunkName: “about” */ './About.vue');
  3. const Contact = () => import(/* webpackChunkName: “contact” */ './Contact.vue');
  4. const routes = [
  5. { path: '/', name: 'home', component: Home },
  6. { path: '/about', name: 'about', component: About },
  7. { path: '/contact', name: 'contact', component: Contact }
  8. ];

代码编译完成后,通过查看生成的统计数据得知:每个页面都有自己单独的文件,同时有多出来一个名为 build_main.js 的打包文件。里面包含少量公共的代码以及逻辑,使用来异步加载其它文件,因而它需要在使用户访问路由之前加载完成。

在 Webpack 中执行代码分割

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 在 Webpack 中执行代码分割

发表回复