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

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
+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 2.0 创作

compression-webpack-plugin 插件
webpack-bundle-analyzer插件
CDN引入
- 成功
- 没成功
Troubleshooting
- npm run build: WARNING in asset size limit: The following asset(s) exceed the recommended size limit

compression-webpack-plugin 插件 †[edit]

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

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

修改 config/index.js 文件

productionGzip 改为：true

↑

IIS设置支持Gzip †[edit]

↑

第一步 Windows设置 †[edit]

“启用或关闭windows功能”里面找到“Internet Information Services”勾选

动态内容压缩
静态内容压缩

↑

第二步修改IIS设置 †[edit]

IIS的配置里面打开“压缩”，开启动态和静态内容压缩

在C:\Windows\System32\inetsrv\config目录，编辑applicationhost.config文件，dynamicTypes节点里面添加下面两行

 <add mimeType="application/json" enabled="true" />
 <add mimeType="application/json;charset=utf-8" enabled="true" />

变成

<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
 <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
 <dynamicTypes>
     <add mimeType="text/*" enabled="true" />
     <add mimeType="message/*" enabled="true" />
     <add mimeType="application/x-javascript" enabled="true" />
     <add mimeType="application/javascript" enabled="true" />
     <add mimeType="application/json" enabled="true" />
     <add mimeType="application/json;charset=utf-8" enabled="true" />
     <add mimeType="*/*" enabled="false" />
 </dynamicTypes>
 <staticTypes>
     <add mimeType="text/*" enabled="true" />
     <add mimeType="message/*" enabled="true" />
     <add mimeType="application/javascript" enabled="true" />
     <add mimeType="application/atom+xml" enabled="true" />
     <add mimeType="application/xaml+xml" enabled="true" />
     <add mimeType="application/json" enabled="true" />
     <add mimeType="application/json;charset=utf-8" enabled="true" />
     <add mimeType="image/svg+xml" enabled="true" />
     <add mimeType="*/*" enabled="false" />
 </staticTypes>
</httpCompression>

↑

第三步重启IIS †[edit]

通过cmd 管理员权限执行 iisreset 重启服务

↑

安装中的问题 †[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]',
    filename: '[path][base].gz[query]', //使用这个否则报警 Conflict: Multiple assets emit different content to the same filename assets/js/.gz
    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

↑

webpack-bundle-analyzer插件 †[edit]

安装插件

npm i webpack-bundle-analyzer -D
或者
cnpm install webpack-bundle-analyzer --save-dev

/build/webpack.prod.conf.js文件中配置：

//文件开始位置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

// 然后plugins里面，添加配置：
plugins: [
    new BundleAnalyzerPlugin()
]

在package.json文件中配置：

"scripts": {
    "analyzer": "NODE_ENV=production npm_config_report=true npm run build"
}

运行 npm run build

会自动在浏览器打开：http://127.0.0.1:8888/

注意：需要保证8888端口空闲

↑

CDN引入 †[edit]

↑

成功 †[edit]

以 NutUI 为例说明，在根目录下的 index.html 文件的head里面添加下面的引用

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui/dist/nutui.min.css">
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui/dist/nutui.min.js"></script>

在webpack.base.conf.js文件中添加以下配置

module.exports = {
 ...
 externals: {
   'vue': 'Vue',
   'nutui': 'nutui',
 },
//如果是vue-cli3以上版本的话没有webpack.base.conf.js文件的话就在vue.config.js文件中配置：

然后删掉之前的引用即可（所有import nutui 的地方都需要删掉）

// NutUI引入
//import NutUI from '@nutui/nutui';
//import '@nutui/nutui/dist/nutui.scss';
//NutUI.install(Vue);

需要使用到的页面，如下修改

//修改前
import { Row, Col } from '@nutui/nutui';

//修改后
import { Row, Col } from 'nutui';

这里的 'nutui' 需要和 webpack.base.conf.js 文件里面定义的一样。

↑

没成功 †[edit]

以 NutUI 为例说明，在根目录下的 index.html 文件里面添加下面的引用

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui/dist/nutui.min.css">
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui/dist/nutui.min.js"></script>

还可以按需引入组件库

<body>
 <div id="app"><nut-button>CDN按需加载</nut-button></div>
 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
 <!-- 引入样式 -->
 <link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/@nutui/nutui/dist/packages/button/button.css"/>
 <!-- 引入Vue -->
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <!-- 引入组件库 -->
 <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui/dist/packages/button/button.js"></script>
 <script>
  Vue.component(button.default.name, button.default);
  new Vue({
     el: "#app"
  });
 </script>
 </body>

然后删掉之前的引用即可（所有import nutui 的地方都需要删掉）

// NutUI引入
//import NutUI from '@nutui/nutui';
//import '@nutui/nutui/dist/nutui.scss';
//NutUI.install(Vue);

cdn链接放的顺序很重要！很重要！很重要！vue的引入放在body后面而不是head里面

一些参考：

https://github.com/zp1112/blog/issues/2
https://www.jb51.net/article/252159.htm
https://blog.csdn.net/qq_38998250/article/details/121772006
https://blog.51cto.com/u_15127641/2754804

↑

Troubleshooting †[edit]

↑

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"]
  },
........
}

コメント：

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