单页应用——代码分割

时间 2019-11-08

标签单页应用代码分割繁體版

原文原文链接

前提说明

在单页应用中的代码分割和多页应用中的代码分割有必定的区别：html

多页应用的代码分割能够经过 Webpack 的配置来实现
单页应用的代码分割只能经过代码中的动态指定 webpackChunkName 来实现

准备工做

为了获取一致的代码体验，这里仍是习惯性的把所依赖的模块贴出来：webpack

"devDependencies": {
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "lodash": "^4.17.10"
  },
  "scripts": {
    "webpack": "webpack"
  }

因为单页应用的入口只有一个，且代码分割的内容不是在配置文件中，而是在实际的代码中，在这里能够直接把所须要的配置贴出来：web

const { resolve, join } = require('path');

module.exports = {
  mode: 'production',
  entry: {
    index: resolve(__dirname, './src/index.js')
  },
  output: {
    path: resolve(__dirname, './dist'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js',              // 根据 chunk name 生成对应的文件
    publicPath: join(__dirname, './dist/')      // 入口 bundle 查找其余 chunk 依赖的路径
  }
};

程序的入口是 index.js，页面中存在两个组件 header 和 footer，这两个组件又共同引入了组件 component.js，在代码中体现，以下：json

index.js：bash

import './header';
import './footer';

header/index.js：ui

import '../component/component';

console.log('header section ...');

export default 'footer';

footer/index.js：code

import '../component/component';

console.log('footer section ...');

export default 'footer';

component/component.js：component

import _ from 'lodash';

console.log(_.join(["Hello", "lodash"]));

export default 'component';

建立一个 index.html 加入打包后的入口 js，为了便于观察效果：htm

<body>
  <script src="./dist/index.bundle.js"></script>
</body>

未进行代码分割的效果

准备工做完成以后，首先来看一下没有通过代码分割的效果。首先执行命令：yarn webpack。ip

Asset      Size  Chunks             Chunk Names
index.bundle.js  1.07 KiB       0  [emitted]  index
Entrypoint index = index.bundle.js

这个时候全部的代码都会打包到 index.bundle.js 中，也就是没有进行代码分割。

进行代码分割

下面的操做就是把全部的代码都分割成单独的 chunk，便于懒加载（懒加载下篇文章说明）。

若是要把全部的 module 都分割成单独的 chunk，就须要使用 import() 方法，而且在该方法的参数中指定 webpackChunkName 来告诉 Webpack 如何分离 chunk。

index.js：

import(/* webpackChunkName: 'header' */ './header').then(module => {
  console.log(module);
}).catch(err => {
  console.log(err);
});
import(/* webpackChunkName: 'footer' */ './footer').then(module => {
  console.log(module);
}).catch(err => {
  console.log(err);
});

header/index.js：

import(/* webpackChunkName: 'component' */ '../component/component').then(module => {
  console.log('in header : ', module);
}).catch(err => {
  console.log(err);
});

console.log('header section ...');

export default 'footer';

footer/index.js：

import(/* webpackChunkName: 'component' */ '../component/component').then(module => {
  console.log('in footer : ', module);
}).catch(err => {
  console.log(err);
});

console.log('footer section ...');

export default 'footer';

component/component.js：

import(/* webpackChunkName: 'lodash' */ "lodash").then(function(_) {
  console.log(_.join(["Hello", "lodash"]));
});

export default 'component';

执行命令后的效果：

Asset       Size  Chunks             Chunk Names
        index.bundle.js   2.24 KiB       0  [emitted]  index
        header.chunk.js  247 bytes       1  [emitted]  header
        footer.chunk.js  248 bytes       2  [emitted]  footer
     component.chunk.js  212 bytes       3  [emitted]  component
vendors~lodash.chunk.js   69.5 KiB       4  [emitted]  vendors~lodash
Entrypoint index = index.bundle.js