专栏首页YuanXin四:单页面解决方案--代码分割和懒加载

四:单页面解决方案--代码分割和懒加载

本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实现的。

目前webpack针对此项功能提供 2 种函数:

  1. import(): 引入并且自动执行相关 js 代码
  2. require.ensure(): 引入但需要手动执行相关 js 代码

本文将会进行逐一讲解。

本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实现的。

目前webpack针对此项功能提供 2 种函数:

  1. import(): 引入并且自动执行相关 js 代码
  2. require.ensure(): 引入但需要手动执行相关 js 代码

本文将会进行逐一讲解。

>>> 本节课源码

>>> 所有课程源码

1. 准备工作

此次代码的目录结构如下:

其中,page.js是入口文件,subPageA.jssubPageB.js共同引用module.js。下面,我们按照代码引用的逻辑,从底向上展示代码:

module.js:

export default "module";

subPageA.js:

import "./module";
console.log("I'm subPageA");
export default "subPageA";

subPageB.js:

import "./module";
console.log("I'm subPageB");
export default "subPageB";

请注意:subPageA.js 和 subPageB.js 两个文件中都执行了console.log()语句。之后将会看到import()require()不同的表现形式:是否会自动执行 js 的代码?

2. 编写配置文件

下面编写webpack配置文件(很简单):

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

module.exports = {
    entry: {
        page: "./src/page.js" //
    },
    output: {
        publicPath: __dirname + "/dist/",
        path: path.resolve(__dirname, "dist"),
        filename: "[name].bundle.js",
        chunkFilename: "[name].chunk.js"
    }
};

同时,关于第三方库,因为要在page.js中使用lodash,所以,package.json文件配置如下:

{
    "devDependencies": {
        "webpack": "^4.15.1"
    },
    "dependencies": {
        "lodash": "^4.17.10"
    }
}

3. import()编写page.js

我个人是非常推荐import()写法,因为和 es6 语法看起来很像。除此之外,import()可以通过注释的方法来指定打包后的 chunk 的名字。

除此之外,相信对vue-router熟悉的朋友应该知道,其官方文档的路由懒加载的配置也是通过import()来书写的。

下面,我们将书写page.js:

import(/* webpackChunkName: 'subPageA'*/ "./subPageA").then(function(subPageA) {
    console.log(subPageA);
});

import(/* webpackChunkName: 'subPageB'*/ "./subPageB").then(function(subPageB) {
    console.log(subPageB);
});

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

命令行中运行webpack,打包结果如下:

我们创建index.html文件,通过

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 十五:开发模式与webpack-dev-server

    借助webpack,在开发模式下我们可以使用热重载、路由重定向、代理服务器等功能,而source-map更是准确定位代码错误的利器。

    心谭博客
  • 一:打包JS

    创建vendor文件夹,其中minus.js、multi.js和sum.js分别用 CommonJS、AMD 和 ES6 规范编写。

    心谭博客
  • 十二:处理第三方JavaScript库

    项目做大之后,开发者会更多专注在业务逻辑上,其他方面则尽力使用第三方JS库来实现。

    心谭博客
  • 十五:开发模式与webpack-dev-server

    借助webpack,在开发模式下我们可以使用热重载、路由重定向、代理服务器等功能,而source-map更是准确定位代码错误的利器。

    心谭博客
  • webpack最简单的入门教程里bundle.js之运行单步调试的原理解析

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • webpack使用优化(基本篇)

    前言 本文不是webpack入门文章,如果对webpack还不了解,请前往题叶的Webpack入门,或者阮老师的Webpack-Demos。 为什么要使用Web...

    李成熙heyli
  • 十二:处理第三方JavaScript库

    项目做大之后,开发者会更多专注在业务逻辑上,其他方面则尽力使用第三方JS库来实现。

    心谭博客
  • 什么!要用毛笔字效果!不会啊?也不能字体侵权!

    前言:学生们在学习ps软件的过程中非常的认真与努力,所以对于软件的使用可以说已经很熟练了,可是为什么当我们给学生安排一些原创设计需求的时候,学生却有种无从下手的...

    用户1730674
  • layer后台管理系统前端框架模板

    后台管理系统,是内容管理系统Content Manage System(简称CMS)的一个子集。CMS是Content Management System的缩写...

    Javanx
  • Python爬虫进阶必备 | 关于某查猫查询参数的加密逻辑分析

    找到要分析的参数,通过首页的检索栏,输入企业名称关键字点击查询就可以抓到类似下面的两个包。

    咸鱼学Python

扫码关注云+社区

领取腾讯云代金券