项目打包js文件过大 のバックアップ(No.2)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• +Vue+项目打包js文件过大 へ行く。
  • 1 (2023-04-25 (火) 19:59:07)
  • 2 (2023-04-25 (火) 20:14:07)
  • 3 (2023-04-26 (水) 11:56:18)
  • 4 (2023-05-05 (金) 18:12:05)

Vue

※前提条件：本文基于 Vue 2.0 创作

compression-webpack-plugin 插件 †[edit]

引入 compression-webpack-plugin 插件，然后开启 gzip 来解决本问题

npm install --save-dev compression-webpack-plugin

修改 config/index.js 文件

productionGzip 改为：true

安装中的问题 †[edit]

ValidationError †[edit]

问题：

ValidationError: Invalid options object. Compression Plugin has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'asset'. These properties are valid:
   object { test?, include?, exclude?, algorithm?, compressionOptions?, threshold?, minRatio?, deleteOriginalAssets?, filename? }

对策：

修改 build\webpack.prod.conf.js ，找到如下内容，将 assert 修改为 filename：

webpackConfig.plugins.push(
  new CompressionWebpackPlugin({
    filename: '[path].gz[query]',
    algorithm: 'gzip',
    test: new RegExp('\\.(' + config.build.productionGzipExtensions.join('|') + ')$'),
    threshold: 10240, // 资源大于10240=10KB时会被压缩
    minRatio: 0.8,
    deleteOriginalAssets: false, // 是否删除原资源
  })
);

TypeError †[edit]

在使用 compression-webpack-plugin 插件时报这个错误，原因是版本问题

TypeError: Cannot read property ‘tapPromise‘ of undefined

先卸载之前安装的compression-webpack-plugin插件

npm uninstall compression-webpack-plugin

再安装指定版本的插件

npm install compression-webpack-plugin@6.1.1

npm run build: WARNING in asset size limit: The following asset(s) exceed the recommended size limit †[edit]

webpack升级webpack4后打包出现文件大小警告提示。

实际项目中没有 webpack.config.js 文件时，修改webpack.base.config.js文件中配置

module.exports = {
  performance: {
    hints: 'warning',
    //入口起点的最大体积 整数类型（以字节为单位）
    maxEntrypointSize: 50000000,
    //生成文件的最大体积 整数类型（以字节为单位 300k）
    maxAssetSize: 30000000,
    //只给出 js 文件的性能提示
    assetFilter: function(assetFilename) {
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  },
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  context: path.resolve(__dirname, '../'),
  entry: {
    app:  ["babel-polyfill", "./src/main.js"]
  },
........
}

コメント：

お名前:

(画像の文字列を入力して下さい)