zoukankan      html  css  js  c++  java
  • 【webpack】chunkFilename详细说明

    你知道chunkFilename的作用吗?

    了解之前,先了解懒加载,动态导入的功能

    let btn = document.createElement('button')
    btn.innerHTML = '按钮1'
    
    btn.addEventListener('click', () => {
      import('./a').then(() => {
        console.log('加载完成')
      })
    })
    
    document.body.appendChild(btn)

    点击按钮加载模块的内容,好像Vue的路由分割,好眼熟。

    我的weback.output配置如下:

      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
      },

    默认导入的模块名字是

    0.bundle.js

    1.bundle.js

    这种动态模块

    要修改模块的名字就是要chunkFilename

      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        chunkFilename: '[name].min.js'
      },

    除了这样改名字,还可以通过注释

      import(/* webpackChunkName: "video" */ './a').then(() => {
        console.log('加载完成')
      })

    其实动态导入还做了一些其他优化,比如预加载

      import(/* webpackPrefetch: true */ './a').then(() => {
        console.log('加载完成')
      })

    prefetch和preload 区别你知道吗?

    了解一下

  • 相关阅读:
    第二阶段团队冲刺第五天
    第二阶段冲刺七
    第二阶段冲刺六
    第二阶段冲刺五
    第二阶段冲刺四
    冲刺第二阶段三
    冲刺第二阶段二
    冲刺第二阶段 一
    项目总结
    第二阶段SCRUM
  • 原文地址:https://www.cnblogs.com/wuxianqiang/p/11183374.html
Copyright © 2011-2022 走看看