• 详解用webpack的CommonsChunkPlugin提取公共代码的3种方式(注意webpack4.0版本已不存在)


    Webpack 的 CommonsChunkPlugin 插件,负责将多次被使用的 JS 模块打包在一起。

    CommonsChunkPlugin 能解决的问题

    在使用插件前,考虑几个问题:

    1. 对哪些 chunk 进行提取,这决定了 chunks ,children 和 name 要怎么配置
    2. common chunk 是否异步,这决定了 async 怎么配置
    3. common chunk 的粒度,这决定了 minChunks 和 minSize 怎么配置

    以下是官方给出的常用的场景:

    1. 提取两个及两个以上 Chunk 的公共代码
    2. 将 Code Split 切割出来的 Chunk「就是子 Chunk」,提取到父 Chunk
    3. 将 Code Split 切割出来的 Chunk,提取到一个新的异步加载的 Chunk
    4. 提取某个类似 jquery 或 react 的代码库

    前面我们实现了 多页面分离资源引用,按需引用JS和css

    但有一个问题:最后生成的3个js,都有重复代码,我们应该把这部分公共代码单独提取出来。

    方式一,传入字符串参数 

    new webpack.optimize.CommonsChunkPlugin(‘common.js'), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    var webpack = require('webpack');
     
    var extractTextPlugin = require('extract-text-webpack-plugin');
     
    module.exports = {
      // entry是入口文件,可以多个,代表要编译那些js
      //entry:['./src/main.js','./src/login.js','./src/reg.js'],
     
      entry:
      {
        'main':'./src/main.js',
        'user':['./src/login.js','./src/reg.js'],
        'index':['./src/index.js']
      },
     
      externals:{
        'jquery':'jQuery'
      },
     
      module:{
        loaders:[
          // {test:/.css$/,loader:'style-loader!css-loader'},
          {test:/.css$/,loader:extractTextPlugin.extract('style','css')}
        ],
      },
     
      output:{
        path: __dirname+'/build/js', // 输出到那个目录下(__dirname当前项目目录)
        filename:'[name].js' //最终打包生产的文件名
      },
     
      plugins:[
        new HtmlWebpackPlugin({
          filename: __dirname+'/build/html/login-build.html',
          template:__dirname+'/src/tpl/login.html',
          inject:'body',
          hash:true,
          chunks:['main','user','common.js'// 这个模板对应上面那个节点
        }),
     
        new HtmlWebpackPlugin({
          filename: __dirname+'/build/html/index-build.html',
          template:__dirname+'/src/tpl/index.html',
          inject:'body',
          hash:true,
          chunks:['index','common.js'// 这个模板对应上面那个节点
        }),
     
        // css抽取
        new extractTextPlugin("[name].css"),
     
        // 提供公共代码
        new webpack.optimize.CommonsChunkPlugin('common.js'), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js
      ]
    };

    方式二,有选择的提取公共代码

    1
    2
    3
    4
    // 提供公共代码
    // 默认会把所有入口节点的公共代码提取出来,生成一个common.js
    // 只提取main节点和index节点
    new webpack.optimize.CommonsChunkPlugin('common.js',['main','index']),

    方式三,有选择性的提取(对象方式传参) 

    推荐

    1
    2
    3
    4
    new webpack.optimize.CommonsChunkPlugin({
      name:'common', // 注意不要.js后缀
      chunks:['main','user','index']
    }),

    通过CommonsChunkPlugin,我们把公共代码专门抽取到一个common.js,这样业务代码只在index.js,main.js,user.js

     https://segmentfault.com/a/1190000012828879(详解commonsChunkPlugin)

  • 相关阅读:
    Flask之model以及缓存
    面向对象设计原则
    【二】、UML基础知识——图图解乾坤
    在大学拼学业,搞副业,我也曾迷茫,但我一直在路上
    vsftpd简介和ftpserver在win10上的下载及安装过程
    使用IDEA详解Spring中依赖注入的类型
    多么痛的领悟——计算机组成原理第一讲
    Java 发展简史:初生遇低谷,崛起于互联网
    写公众号一个月关注量破900,聊聊我的感受
    用IDEA详解Spring中的IoC和DI(挺透彻的,点进来看看吧)
  • 原文地址:https://www.cnblogs.com/raind/p/8595439.html
Copyright © 2020-2023  润新知