Webpack4代码分割实现按需加载/懒加载

{app.params.name}} {app.params.name}} {app.params.name}}

为什么要实现按需加载或懒加载,引用下官网的话

懒加载或者按需加载,是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开,然后在一些代码块中完成某些操作后,立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度,减轻了它的总体体积,因为某些代码块可能永远不会被加载。

1、现在clone原始项目如下

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git webpack-react-demo
cd webpack-react-demo
npm install
npm start

2、安装代码分割懒加载需要的库

npm install babel-plugin-syntax-dynamic-import --save-dev
npm install react-loadable

3、代码配置
webpack.config.js

output: {
  filename: '[name].bundle.js',
  path: path.resolve(__dirname, 'dist'),
},


添加如下代码

chunkFilename: '[name].bundle.js',


结果如下

output: {
  filename: '[name].bundle.js',
  chunkFilename: '[name].bundle.js',
  path: path.resolve(__dirname, 'dist'),
},

.babelrc

"plugins": [
  "transform-async-to-generator",
  "transform-strict-mode",
  "transform-object-assign",
  "transform-decorators-legacy",
  "react-hot-loader/babel"
],


plugins中添加如下代码

"syntax-dynamic-import"


结果如下

"plugins": [
  "transform-async-to-generator",
  "transform-strict-mode",
  "transform-object-assign",
  "transform-decorators-legacy",
  "react-hot-loader/babel",
  "syntax-dynamic-import"
],


4、修改代码调用
修改src/routes.jsx
添加

import Loadable from 'react-loadable';


将路由配置中的

<Route path="/about" component={AboutComponent} />


改为

<Route
  path="/about"
  component={Loadable({
    loader: () => import('./components/AboutComponent'),
    loading: LoadingComponent,
  })}
/>


从webpack-dev-server控制台可以看出原来的如下图


更新代码后通过webpack-dev-server控制台可以看出多了一个类似0.bundle.js的文件,如下图

同样的逻辑我们更改 /topics对应的组件和/counter对应的组件
从webpack-dev-server控制台可以看出,多了几个类似的文件

如果我重新启动webpack-dev-server的话可以从webpack-dev-server控制台日志看出类似下图的输出

小知识点

chunkFilename: '[name].bundle.js',

改为

chunkFilename: '[chunkhash].bundle.js',

重新

npm start

看看日志输出,会看到类似如下的输出

这个特点有助于项目的版本发布需求

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag: v_1.0.4

 


版权声明

durban 创作并维护的 Gowhich 博客采用 创作共用保留署名-非商业-禁止演绎4.0国际许可证。

本文首发于 Gowhich 博客( https://www.gowhich.com ),版权所有,侵权必究。

本文永久链接: https://www.gowhich.com/blog/831

comments powered by Disqus