webpack从入门到原理（高级七）——优化代码运行性能（Code Split 下）

i东东
161 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情

接上文继续写Code Split优化代码运行性能。

按需加载，动态导入

假设现在有一个按钮，当点击时需要执行一段操作,那么也就是说在我没有点击时不需要执行这段操作，所以在我点击之前页面其实并不需要加载这段操作的代码。

如下，我写了一个加法计算，在点击按钮时在控制台输出两个数的和，那么在我点击按钮之前，这个count是不需要加载的！

image.png

在浏览器打开之后可以看到控制台，在还没有点击按钮的时候548.js已经被进行了加载

image.png

使用

像上面这样肯定会拖慢我们代码运行的速度，所以我们可以用按需引入的方法来优化，这样就需要用到import来动态引入，他会在打包时会将动态导入的代码分割拆分成单独的文件，在需要使用的时候在进行加载。

image.png

image.png 在浏览器运行会发现293.js在没有点击按钮之前是没有加载的，这样就实现了按需加载动态导入的功能。点击按钮后输出如下

image.png

这样就可以通过res.count(1,1)进行调用：

image.png

单入口

开发时我们可能是单页面应用(SPA),只有一个入口,那我就需要进行一下更改！

// webpack.config.js
entry: './src/main.js', // 更改成单入口
optimization: {
    splitChunks: {
      chunks: "all", // 对所有模块都进行分割
    }
}

这样就还原成了单页面的配置！进行按需导入的时候如果eslint报错，需要在.eslintrc.js中加上plugin: ['import']这样import就可以在所有页面进行使用了！

给动态导入文件命名

现在打包后的文件名称是没有意义的,当我们的代码越来越多，这样的命名会带来很多麻烦，很难知道每个文件的作用，所以就需要给他们命名！

image.png

webpack有一种命名规则，通过注释的方法进行命名:

// main.js
document.getElementById('btn').onclick = function () {
  //  /* webpackChunkName：'division' */ webpack魔法命名法
  import(/* webpackChunkName: "division" */ './js/division').then(({ division }) => {
    console.log('按需引入', division(6, 3));
  })
}

// webpack.prod.js

output:{
    // 设置打包输出的其他文件的命名
    chunkFilename:'static/js/[name].js'
}

通过以上两步的配置之后，再次进行打包可以看到如下图，名称就会变成设置的名称如下图，，这样可能会不好分辨哪hunkFilename:'static/js/[name].chunk.s'`

image.png

统一命名

看前面的配置可以看到他们的命名规则都是一样的，所以我们可以直接写在一起，进行复用

image.png

使用

在output中增加assetModuleFilename,这样图片、字体等资源以ype: "asset"就都会以下面的规则进行命名！

output:{
    assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名方式（注意用hash）
}

完成上面的配置进行打包就会ype: "asset"的资源就放在了media目录下

image.png 开发模式和生产模式都可以进行如上配置！

小结

持续学习，不断进步，加油！！！

avatar
文章
阅读
粉丝