美文网首页
Code Splitting

Code Splitting

作者: 行走的蛋白质 | 来源:发表于2020-04-01 17:06 被阅读0次
  • Code Splitting 其实就是把代码分成很多很多块( chunk

在以前,为了减少 HTTP 请求,通常地,我们都会把所有的代码都打包成一个单独的 JS 文件。但是,如果这个 JS 文件体积很大的话,那就得不偿失了。
这时,我们不妨把所有代码分成一块一块,需要某块代码的时候再去加载它;还可以利用浏览器的缓存,下次用到它的话,直接从缓存中读取。很显然,这种做法可以加快我们网页的加载速度


方法
  • 分离业务代码和第三方库( vendor )
  • 按需加载利用 import().then 语法、require.ensure
实例
  • 我希望懒加载 moment 库,同时我也希望使用代码分割的功能,这意味 moment 会被分割到一个单独的 JavaScript 文件,当它被使用时,会被异步加载
import(/* webpackChunkName: "momentjs" */ 'moment')
  .then(moment => {
    // 懒加载的模块拥有所有的类型,并且能够按期工作
    // 类型检查会工作,代码引用也会工作  :100:
    const time = moment().format();
    console.log('TypeScript >= 2.4.0 Dynamic Import Expression:');
    console.log(time);
  })
  .catch(err => {
    console.log('Failed to load moment', err);
  });

相关文章

网友评论

      本文标题:Code Splitting

      本文链接:https://www.haomeiwen.com/subject/bnpauhtx.html