zoukankan      html  css  js  c++  java
  • 打包文件太大

    一般情况下,直接require第三方库,比如jquery,然后webpack会自动把第三方库打包进bundle.js里面去,这样就造成了三个问题:

    1. bundle.js的文件会非常大
    2. 每次更新bundle.js的时候根本没有更新第三方库,但是用户仍然要下载包含所有第三方库的bundle.js,不利于缓存
    3. 更新第三方库的时候很麻烦,又要重新下bundle.js。(虽然这种情况很少)

     这里暂且提出一个解决方案

      在webpack.prod.conf.js中写入如下代码:

    let checksArray = {
       //例如:
      'element-ui': ['element-ui'],
    }
    
    let plugsArray = []
    Object.keys(checksArray).forEach((key1, index1) => {
      let modules = []
      Object.keys(checksArray).forEach((key2, index2) => {
        if (index1 <= index2) {
          modules = modules.concat(Array.isArray(checksArray[key2])?checksArray[key2]:[checksArray[key2]])
        }
      })
    
      let minChunks = (function (modules) {
        return function (module) {
          let result = false
          modules.forEach((name)=>{
            result = result || module.resource.toLowerCase().indexOf(name) !== -1
          })
          return (
            module.resource &&
            /.js$/.test(module.resource) &&
            module.resource.indexOf(
              path.join(__dirname, '../node_modules'),
            ) === 0 && result
          )
        }
      }(modules))
    
      let plugs = new webpack.optimize.CommonsChunkPlugin({
        name: key1,
        minChunks,
      })
      plugsArray.push(plugs)
    })
    
    const webpackConfig = merge(baseWebpackConfig, {
      plugins: [
        ...plugsArray,
      ],
    })

    即可对代码的包进行分割。

  • 相关阅读:
    EXTJS 动态改变Gird 列值
    EXTJS动态改变store的proxy的params
    获取Spring容器Bean
    EXTJS 6 必填项加星号*
    Maven打包附加配置文件
    MyEclipse 优化
    Android-SurfaceView生命周期
    Android-PopupWindow
    Android-Sqlite3的使用
    Android-adb的使用
  • 原文地址:https://www.cnblogs.com/zhouyideboke/p/10519114.html
Copyright © 2011-2022 走看看