[Webpack 2] Maintain sane file sizes with webpack code splitting

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 41 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/5608611.html

文章标签：

#webpack #runtime #ViewUI

本文介绍了如何通过代码分割实现懒加载来提升大型单页应用的性能。通过按需加载特定功能所需的代码，可以显著减少初始加载时间并提高用户体验。

As a Single Page Application grows in size, the size of the payload can become a real problem for performance. In this lesson, learn how to leverage code splitting to easily implement lazy loading for your application to load only the code necessary for a particular feature or functionality.

Here we loads facts at the beginning. So this will be bundled into the bundle.js file. This is not good enought if the application becomes large.

import {$on} from './helpers'
import * as facts from './facts'

const factsList = document.getElementById('facts-list')
const factText = document.getElementById('fact-text')

$on(factsList, 'click', ({target: {dataset: {fact}}}) => {
  if (!facts) {
      factText.innerText = facts.defaultFact
      return
  }
   factText.innerText = facts[fact]
})

So what we want to do is loading the file on demand. And wepack will help to load file on runtime.

import {$on} from './helpers'

const factsList = document.getElementById('facts-list')
const factText = document.getElementById('fact-text')

$on(factsList, 'click', ({target: {dataset: {fact}}}) => {
    if (!fact) {
        return System.import('./facts/default-fact').then(setFactText)
    }
    System.import('./facts/' + fact).then(setFactText)

    function setFactText({fact: animalFact}) {
        factText.innerText = animalFact
    }
})

To do that, we need to tell Webpack to import file when it needed by using :

System.import('./facts/' + fact)

It returns a promise, then we do parse the stuff:

    System.import('./facts/' + fact).then(setFactText)

    function setFactText({fact: animalFact}) {
        factText.innerText = animalFact
    }

转载于:https://www.cnblogs.com/Answer1215/p/5608611.html