Home > Developer > Web Develop
This lesson explains
webpack4code segmentation and code lazy loading during a packaged single-page application . Unlike the extraction of common code for multi-page applications, single-page code splitting and lazy loading are notwebpackimplemented by configuration, but bywebpackthe notation and built-in functions.
There are currently webpack 2 functions available for this feature:
import(): Introduction and automatic execution of relevant JS coderequire.ensure(): Introduces but requires manual execution of the relevant JS codeThis article will be explained in turn.
>>> the source of this lesson
>>> All courses Source code
1. Preparatory workThe directory structure of this code is as follows:
Among them, page.js is the entry file, subPageA.js and the subPageB.js common reference module.js . Below, we show the code from the bottom up according to the logic referenced by the code:
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";
Note: Statements are executed in both Subpagea.js and subpageb.js two files console.log() . Then you will see import() and require() different forms of expression: Will the JS code be executed automatically?
Write the following webpack configuration file (very simple):
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" }};
Also, for third-party libraries, because they are to be used in, the page.js lodash file is package.json configured as follows:
3.{ "devDependencies": { "webpack": "^4.15.1" }, "dependencies": { "lodash": "^4.17.10" }}
import()page.jsI personally recommend writing import() because it looks very much like the ES6 syntax. In addition, import() you can specify the name of the packaged chunk by annotating the method.
In addition, believe that the vue-router familiar friend should know that its official document routing lazy loading configuration is also through import() to write.
Below, we will write 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";
Run on the command line webpack and package the results as follows:
We create index.html files and <script> introduce our packaging results via tags, and it's important to note that because it's a single page application, you can just refer to the portal file (that is, it is in page.bundle.js ).
<!DOCTYPE html>
Open the browser console and refresh the interface, as shown in the following:
The circled part of the diagram shows the import() code that will run automatically subPageA.js和subPageB.js .
In the NetWork option, we can see that lazy loading is also successful:
4.require()page.jsrequire.ensure()Does not automatically execute js code, note the comment:
require.ensure( ["./subPageA.js", "./subPageB.js"], // js文件或者模块名称 function() { var subPageA = require("./subPageA"); // 引入后需要手动执行，控制台才会打印 var subPageB = require("./subPageB"); }, "subPage" // chunkName);require.ensure( ["lodash"], function() { var _ = require("lodash"); _.join(["1", "2"]); }, "vendor");export default "page";
In fact, according to the code we write, subPageA.js and subPageB.js the common reference to the module.js file, we can module.js draw out the expression:
require.include("./module.js"); // 将subPageA和subPageB共用的module.js打包在此page中// ...// 再输入上面那段代码
After the final packaging, the inspection and introduction method and the import() same, here no longer redundant.
Welcome to the technical Exchange, quote please indicate the source.
Personal website: Yuan Xin
Original link: Webpack4 series tutorial (iv): Single page solution-code splitting and lazy loading
Webpack4 Series Tutorial (iv): Single page solution-code splitting and lazy loading
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
