干货分享---通过实现webpack4.x项目拆分 提升 网站 50% 加载速度

前言

在当今的互联网环境下，用户体验俨然成为了革命的刚需。用户怎么判断哪家的产品好用呢？作为网页应用，加载速度一直都是给用户的第一印象。
当然，网页的优化方式有很多。比如 服务器环境（选择高速、高转发率框架 如 Ngnix。选择更先进的协议 如 Http2）、gzip压缩（需要服务器环境支持）、CDN加速静态资源访问
等等等等，都是很好的途径。以上方式，或多或少的需要依赖后端或者运维的支持。甚至会受到所在公司技术栈的制约。

文中提到的将是一种前端工程师可以自由把控的方式。它能让单（多）页应用实现公共部分单独打包，并通过对项目编译时的拆分，实现网页资源的多并发异步加载。

假设一个人吃一个汉堡包需要5min
那现在我把汉堡分成5份，并让5个人同时吃，理论上就能达到1min一个汉堡的速度啦~~

此处的汉堡就是我们的前端项目编译后的静态文件，5个人可以理解为浏览器同时分配的5个异步请求。

那么问题来了。编译的时候，我们怎么切好这个 ”汉堡” 呢？让我来有请本篇的主角：webpack splitchunksPlugin插件。

一、先装备上能具现化”汉堡“的工具 — webpack-bundle-analyzer

项目内安装

# NPM 
npm install --save-dev webpack-bundle-analyzer
# Yarn 
yarn add -D webpack-bundle-analyzer

在webpack配置文件中添加如下代码

...
let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = merge(baseWebpackConfig, {
   
  ...,
  plugins: [
    ...,
    new BundleAnalyzerPlugin()
  ],
}

然后开始构建项目，接下来以我的项目为例。项目配置：webpack4.x + babel7.x + react16.x + mobx + ECharts + antd(已做按需加载)

控制台阻塞后，浏览器会自动打开 http://127.0.0.1:8888/。如果没跳出来，可以手动打开此链接