zoukankan      html  css  js  c++  java
  • webpack 之(18) 优化配置 之 code split

    第一种方式:单入口和多入口

      注: 单入口,只会输出一个文件,

            多入口,就会输出多个文件

    前提: index.js 引入 print.js文件,若是配置单个入口,就会把两个文件打包成一个文件

             index.js引入print.js文件,若是配置多个路口文件,就会把两个文件分别打包成一个文件(共有两文件)

                 如果设置的output: { filename:'js/built.js'} 如果这样设置,那么就会生成两个built.js的文件,只是hash值不一样,所以才会写成下面的形式

    缺点:不够灵活,要是三个路口,三个路口,那么一直在修改,就很麻烦,所以看第二种/第三种

    第二种:通过optimization配置

      1. 单入口,然后在index.js中引入jquery ,之后配置以下内容

             会输出两个文件: 一个jquery,一个index

             所以可以将node_modules中代码单独打包一个chunk最终输出

      2.多入口,然后index.js和text.js分别引入jquery,之后配置以下内容

            会输出三个文件,index,test都会生成一个,公共的jquery会被打包成一个

             所以会自动分析多入口chunk中,有没有公共的文件(必须是那种至少几十Kb的文件).如果有会打包成单独一个chunk

      

    第三种 通过js代码,让某个文件被单独打包成一个chunk

    import动态导入语法:能将某个文件单独打包

    注意: 需要通过 /*webpackChunkName:'test'*/进行重命名

    在index.js中 写一个代码

    import(/* webpackChunkName : 'test' */'./test').then({mul,count}) =>{

       mul()

    }.catch(()=>{

    })

  • 相关阅读:
    2.Android之按钮Button和编辑框EditText学习
    《DSP using MATLAB》Problem 3.8
    《DSP using MATLAB》Problem 3.7
    《DSP using MATLAB》Problem 3.6
    《DSP using MATLAB》Problem 3.5
    《DSP using MATLAB》Problem 3.4
    《DSP using MATLAB》Problem 3.3
    《DSP using MATLAB》Problem 3.2
    《DSP using MATLAB》Problem 3.1
    《DSP using MATLAB》Problem 2.20
  • 原文地址:https://www.cnblogs.com/zmztya/p/14715031.html
Copyright © 2011-2022 走看看