zoukankan      html  css  js  c++  java
  • [Webpack 2] Maintain sane file sizes with webpack code splitting

    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
        }
  • 相关阅读:
    git命令使用方法
    git与svn对比
    浏览器缓存原理
    网络性能优化常用方法
    sass/scss 和 less的区别
    AngularJS和ReactJS对比
    让IE6,7,8支持HTML5新标签的方法
    Retina 屏移动设备 1px解决方案
    HttpClient学习
    国家二字码对照表
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5608611.html
Copyright © 2011-2022 走看看