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
        }
  • 相关阅读:
    多环境
    Date的after()与before()方法的使用
    Centos6.8 yum报错及修复YumRepo Error: All mirror URLs are not using ftp, http[s] or file. Eg. Invalid
    JSON格式数据解析看这一个就足够了
    widnows下lua开发环境luadist LuaRocks搭建
    树的相关定义及遍历
    win10 启动redis服务的bat
    PageHelper分页失效的可能原因之一
    el-table多选表头复选框不对齐
    好用的软件推荐
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5608611.html
Copyright © 2011-2022 走看看