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(()=>{

})