The way of Webpack learning (III.) -- codeSplitting & lazyLoding(代码分割和路由懒加载)

代码分割:对于一个大型的web项目来说,如果为了减少http请求,只打包出一个bundle.js文件,那么只要我们的需求修改了一点点,整个bundle.js都需要重新加载,得不偿失。所以我们不妨把代码分割成一块一块的,按需加载,而且还能利用浏览器缓存机制,如果文件没有修改,直接从缓存读取。也就是说,代码分割就是把代码切成很多块(chunk)。

懒加载:按需加载,页面需要什么文件我才去加载什么文件。我现在只知道应用在路由懒加载中,就是根据路由,按需加载不同的文件。

在上一章节提到使用CommonchunkPulgin只适合于多页面提取公共代码,不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实现的。

目前webpack针对此项功能提供 2 种函数:1)import(): 引入并且自动执行相关 js 代码。2)require.ensure(): 引入但需要手动执行相关 js 代码。

一:webpack.config.js的配置

const webpack = require("webpack");
const path = require("path");

module.exports = {
    mode:‘development‘,
    entry: {
        pageA: "./src/pageA.js"
    },
    output: {
        path: path.resolve(__dirname, "dist"),     publicPath:‘./dist/‘,//声明打包的chunk的相对路径
        filename: "[name].bundle.js",
        chunkFilename: "[name].chunk.js"//代码分割出去的chunk的名字
    },
};

二:使用require.ensure()进行代码分割

require.include("./moduleA.js"); // 将subPageA和subPageB共用的module.js打包在此pageA中

require.ensure(["./subA.js", "./subB.js"], // js文件或者模块名称,这里代表subA和subB一起打包,但不执行这两个包。
  function() {
    var subPageA = require("./subA"); // 引入后需要手动执行,控制台才会打印
    var subPageB = require("./subB");
  },
  "subPage" // 分割之后的chunk名字
);

require.ensure(["lodash"],function() {//第三方库也分割为一个文件
    var _ = require("lodash");
    _.join(["1", "2"]);
  },‘vendor‘);

export default "page";

三:使用include()进行代码分割

// 将subPageA和subPageB共用的module.js打包在此pageA中
//如果没有定义这句话,moduleA.js将同时打包到A.chunk.js和B.chunk.js里面,就是重复打包了。
require.include("./moduleA.js"); 

import(/* webpackChunkName: ‘A‘*/ "./subA").then(function(subA) {//subA为文件subA.js的module
  console.log(subA);
});
//如果想要把subA和subB都打包到一个chunk里面。只需要命名同样的webpackChunkName即可。
// import(/* webpackChunkName: ‘A‘*/ "./subB").then(function(subB) {
//   console.log(subB);
// });

import(/* webpackChunkName: ‘B‘*/ "./subB").then(function(subB) {
  console.log(subB);
});

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

export default "page";

四:路由懒加载

一般没有用来路由懒加载是这样的:

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Home from ‘./views/Home.vue‘
import About from ‘./views/About.vue‘

Vue.use(Router)

export default new Router({
  routes: [  {
      path: ‘/home‘,
      name: ‘home‘,
      component: Home
    },
    {
      path: ‘/about‘,
      name: ‘about‘,
      component: About
    }
  ]

使用路由懒加载之后,代码需要这样配置:

import Vue from ‘vue‘
import Router from ‘vue-router‘

Vue.use(Router)

function loadView(view) {
  return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`)
}

export default new Router({
  routes: [
    {
      path: ‘/home‘,
      name: ‘home‘,
      component: loadView(‘Home‘)
    },
    {
      path: ‘/about‘,
      name: ‘about‘,
      component: loadView(‘About‘)
    }
  ]
})

除了上面用到的import()引入组件,我们还可以使用webpack特有的require.ensure()

const Baz = r => require.ensure([], ()=>r(require(‘./Baz.vue‘)), ‘/baz‘)

将其他的文件配置完成后,我们就可以在浏览器中看到懒加载的效果了,即只有当路由匹配成功时,才会加载相应的组件,而且加载一次后会将它缓存,下次再访问这个路由,不会重新加载。

路由懒加载这里参考这编文章,很快就理解了:https://www.javascriptcn.com/read-37423.html

原文地址:https://www.cnblogs.com/weihuan/p/9638110.html

时间: 2024-10-11 21:53:39

The way of Webpack learning (III.) -- codeSplitting & lazyLoding(代码分割和路由懒加载)的相关文章

vue-router和webpack懒加载,页面性能优化篇

在vue单页应用中,当项目不断完善丰富时,即使使用webpack打包,文件依然是非常大的,影响页面的加载.如果我们能把不同路由对应的组件分割成不同的代码块,当路由被访问时才加载对应的组件(也就是按需加载),这样就更加高效了.--引自vue-router官方文档 如何实现?? vue异步组件 vue-router配置路由,使用vue的异步组件技术,可以实现懒加载,代码如下:// 每个组件都会生成一个js文件 import Vue from 'vue' import Router from 'vue

webpack打包懒加载

lazyload https://webpack.js.org/guides/lazy-loading/ 懒加载 -- 按需加载. Lazy, or "on demand", loading is a great way to optimize your site or application. This practice essentially involves splitting your code at logical breakpoints, and then loading

webpack 代码拆分,按需加载

转自:https://segmentfault.com/a/1190000007649417?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly 如果利用 webpack 将项目中的所有代码打包在一起,很多时候是不适用的,因为代码中有些东西我们总是希望将其拆分出来.比如: 样式表,希望利用 link 标签引入 使用概率较低的模块,希望后期需要的时候异步加载 框架代码,希望能利用浏览器缓存下部分不易变动的代码 下面是我在阅

vue+webpack实现懒加载的三种方式

实现方式: 1.webpack method require.ensure([''], callback, chunkName) ; 2.es6 motehod import() import().then() import(/* webpackChunkName: async-chunk-name */ /* webpackMode: lazy */ modulename) 需要安装bable插件 syntax-dynamic-import,因为import只能出现在页面顶部 具体实现: 第一

使用Webpack的代码拆分在Vue中进行懒加载

参考学习:https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting/ 学习文案:https://webpack.docschina.org/guides/lazy-loading/ 原文地址:https://www.cnblogs.com/nayek/p/12123639.html

前端性能优化之按需加载(React-router+webpack)

一.什么是按需加载 和异步加载script的目的一样(异步加载script的方法),按需加载/代码切割也可以解决首屏加载的速度. 什么时候需要按需加载 如果是大文件,使用按需加载就十分合适.比如一个近1M的全国城市省市县的json文件,在我首屏加载的时候并不需要引入,而是当用户点击选项的时候才加载.如果不点击,则不会加载.就可以缩短首屏http请求的数量以及时间. 如果是小文件,可以不必太在意按需加载.过多的http请求会导致性能问题. 二.实现按需加载的方法 Webpack打包模块工具实现 R

webpack loader加载器

配置loader,通过加载器处理文件,例如css sass less等,告诉webpack每一种文件都需要使用什么来加载器来处理. 1.node.js安装好之后也会自动默认安装好npm,所以cmd cd进入当前项目下输入npm install babel-loader babel babel-core css-loader style-loader url-loader file-loader less-loader less --save-dev命令下载这些包. 2.修改webpack.con

利用 React/Redux/React-Router 4/webpack 开发大型 web 项目时如何按需加载

如何设计一个大型 web 项目? React + webpack 如何按需加载? React + React-Router 4 + webpack 如何按需加载? React + Redux + React-Router 4 + webpack 如何按需加载? 实录提要: bundle-loader 和 Webpack 内置的 import() 有什么区别? 按需加载能否支持通过请求后台数据,动态配置页面的的应用场景? 参与过几个 React 项目,被依赖包搞的晕晕的,不知道该怎么选择? 什么包

单步调试理解webpack里通过require加载nodejs原生模块实现原理

在webpack和nodejs里,我们经常使用require函数加载原生模块或者开发人员自定义的模块. 原生模块的加载,比如: const path = require("path"); 这个语句是webpack和nodejs应用里经常使用到的.今天就来谈谈它的实现原理. 还是通过单步调试的方式来学习. 大家首先得通过我前一篇文章webpack打包过程如何调试?学会如何调试webpack打包过程. require函数的实现位于file:///internal/module.js 注意看