preface

All because of a problem in the group

Although I have been working on WebPack recently, I have not done any research on how to do it. Many articles on the Internet, including Vue, recommend using import, but do not say why to use import. For developers, there is no difference in how to use import. So why do import packages have to be smaller than require packages

Here temporarily do not say what calls the way, what dynamic loading (require), static compilation (import), this online have, this article is to analyze why to useimportInstead,require

The body of the

First, build an environment based on WebPack locally just for testing, and don’t need to build anything too complex

Basic file Contents

// webpack.config.js
module.exports = {
  mode: 'development'.entry: './src/index.js'
}
Copy the code

Add two calls within index.js

function test() {
  const { b } = import('./importtest')
  console.log(b()) 
}
test()

// or

function test() {
  const { b } = require('./requiretest')
  console.log(b()) 
}
test()
Copy the code

The output in importtest.js is also simple

// importtest.js
export default {
  b: function () {
    return {
      name: 'zhangsan'}}}Copy the code

The same is true of requiretest.js

// requiretest.js
module.exports = {
  b: function() {
    return {
      name: 'lisi'}}}Copy the code

After executing WebPack in each of the above ways, the output is as follows

The import and output

Js and src_importtest_js.js. The output from main.js is as follows

The contents of index.js in main.js and the contents of importtest are referenced by an index at src_importtest_js.js

The require of output

When required is packaged, it outputs a single file, only main.js. The output from main.js is as follows

The contents of main.js are all the contents of index.js and requiretest.js

To sum up, from the perspective of data, import packages should be larger than require, but from the perspective of packaging files, the file size caused by business code is actually smaller than requireCopy the code

Packaging changes resulting from multiple references

At this point, we probably know the difference between import and require packaging. Next, we can imitate the student’s problem at the beginning, and directly modify the webpack.config.js entry

module.exports = {
  mode: 'development'.entry: {
    index: './src/index.js'.index1: './src/index1.js'}}Copy the code

Make sure index.js is the same as index1.js, and test the packaging of import first

The contents here are basically the same as the import package in the single entry. The contents in the package are all the src_importtest_js addresses that are referenced, so look at the require package

This is basically the same as the single-entry package require, which copies the contents of requireTest to the corresponding file

Although we are looking at multi-entry packaging now, import files are still larger than require files, but the core problem is that the amount of business code in the test case is relatively small, so it seems that import is larger than require. When the amount of business code reaches the actual standard, You can see the difference

conclusion

Import: The packaged content is given to a path through which the corresponding content can be accessed

Require: Package the contents of the currently accessed resource into the current file

Here we can explain why vUE official and online articles recommend import but not require, because every file using require will package the contents of the current require into the current file, so the file is too large, so use import. What is thrown out is an index, so there is no packaging of duplicate content, so there is no package size

Of course, this is not absolute, just like the above case of a small amount of business code, the amount of code using import is actually larger than require, so it is not recommended that you directly determine a certain way is the best, a certain way is not, according to the scenario to choose the method

The end of the

This article is a simple introduction of basic research on technology, not particularly advanced things, but also hope to be helpful to you, if there is not enough coverage, or the scene is not comprehensive, I hope you can raise, I will continue to add

This type of article is not my good direction, I still like to study some new things, welcome your advice:

Actual combat – how to optimize the performance of the particle size to do more fine

Thoughts section – Reflections on the problems of componentized development through the appearance of hooks

Paradigms – How to apply functional programming to everyday work