基于webpack Code Splitting实现react组件的按需加载45.docxVIP

基于webpack Code Splitting实现react组件的按需加载本文章来自于阿里云云栖社区摘要：?随着web应用功能越来越复杂，模块打包后体积越来越大，如何实现静态资源的按需加载，最大程度的减小首页加载模块体积和首屏加载时间，成为模块打包工具的必备核心技能。webpack作为当下最为流行的模块打包工具，成为了react、vue等众多热门框架的官方推荐打包工具。其提供的Code Splitting（代码分割）特性正是实现模块按需加载的关键方式。 # 什么是Code Splitt随着web应用功能越来越复杂，模块打包后体积越来越大，如何实现静态资源的按需加载，最大程度的减小首页加载模块体积和首屏加载时间，成为模块打包工具的必备核心技能。webpack作为当下最为流行的模块打包工具，成为了react、vue等众多热门框架的官方推荐打包工具。其提供的Code Splitting（代码分割）特性正是实现模块按需加载的关键方式。什么是Code Splitting官方定义：Code splitting is one of the most compelling features of webpack. It allows you to split your code into various bundles which you can then load on demand — like when a user navigates to a matching route, or on an event from the user. This allows for smaller bundles, and allows you to control resource load prioritization, which if used correctly, can have a major impact on your application load time翻译过来大概意思就是：代码分割功能允许将web应用代码分割为多个独立模块，当用户导航到一个匹配的路由或者派发某些特定事件时，来按需加载这些模块。这样就可以将大型的模块分割为多个小型的模块，实现系统资源加载的最大优化，如果使用得当，能够极大的减少我们的应用首屏加载时间。Code splitting 分类一、缓存和并行加载的资源分割这种方法是将某些第三方基础框架模块（例如：moment、loadash）或者多个页面的公用模块拆分出来独立打包加载，通常这些模块改动频率很低，将其与业务功能模块拆分出来并行加载，一方面可以最大限度的利用浏览器缓存，另一方面也可以大大降低多页面系统的代码冗余度。按照资源类型不同又可以分为js公共资源分割和css资源分割两类。1、js公共资源分割例如：系统应用入口文件index.js中使用日期功能库?momentjs。（原文链接：/package/moment?spm=5176.100239.blogcont71200.18.vr70al）index.jsvarmoment = require(moment);console.log(moment().format());webpack.config.js定义多个entry入口main为主入口模块文件vendor为公共基础库模块，名字可随意设定。称为initial chunkvar path = require(path);module.exports = {entry: {main: ./index.js,vendor: [moment] },output: {filename: [name].js,path: path.resolve(__dirname, dist) }}执行webpack打包命令：webpack--progress--hide-modules可以看到最终打包为两个js文件?main.js?、vendor.js，但如果检查者两个文件会发现moment模块代码被重复打包到两个文件中，而这肯定不是我们想要的，这时候就需要webpack的plugin发挥作用了。使用CommonsChunkPluginvarwebpack = require(webpack);var path = require(path);module.exports = {entry: {main: ./index.js,vendor: [moment] },output: {filename: [chunkhash:8].[name].js,path: path.resolve(__dirname, dist) },plugins: [newwebpack.optimize.CommonsChunkP