项目打包js文件过大 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +Vue+项目打包js文件过大 へ行く。
• +Vue+项目打包js文件过大 の差分を削除

#author("2023-05-05T17:12:05+08:00","default:Admin","Admin")
#author("2023-05-11T08:52:56+08:00","default:Admin","Admin")
[[Vue]]

&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents

* compression-webpack-plugin 插件 [#o70d3211]

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

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



修改 config/index.js 文件

 productionGzip 改为：true

** IIS设置支持Gzip [#zceaaea0]

***第一步 Windows设置 [#sc2fcf38]

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

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

***第二步 修改IIS设置 [#wbd6c6df]

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

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

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

变成
#codeprettify{{
<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 [#gb12937e]

通过cmd 管理员权限执行 iisreset 重启服务
** 安装中的问题 [#c2dd67a3]

*** ValidationError [#x6cd97a2]

问题：

#codeprettify{{
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：

#codeprettify{{
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 [#ve748dee]

在使用 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插件 [#jf6b171f]

安装插件

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


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

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

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

在package.json文件中配置：
#codeprettify{{
"scripts": {
    "analyzer": "NODE_ENV=production npm_config_report=true npm run build"
}
}}

运行 npm run build

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

&ref(VUE_analyer.jpg);

&color(red){注意：需要保证8888端口空闲};

* CDN引入 [#w427dc70]

** 成功 [#j6866c25]


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

#codeprettify{{
<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文件中添加以下配置

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

然后删掉之前的引用即可（所有import nutui 的地方都需要删掉）
#codeprettify{{
// NutUI引入
//import NutUI from '@nutui/nutui';
//import '@nutui/nutui/dist/nutui.scss';
//NutUI.install(Vue);
}}

需要使用到的页面，如下修改
#codeprettify{{
//修改前
import { Row, Col } from '@nutui/nutui';

//修改后
import { Row, Col } from 'nutui';
}}
这里的 'nutui' 需要和 webpack.base.conf.js 文件里面定义的一样。

参考Url：

 https://www.ab62.cn/article/18742.html
** 没成功 [#l46b9949]

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

#codeprettify{{
<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>
}}

还可以按需引入组件库
#codeprettify{{
<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 的地方都需要删掉）
#codeprettify{{
// NutUI引入
//import NutUI from '@nutui/nutui';
//import '@nutui/nutui/dist/nutui.scss';
//NutUI.install(Vue);
}}

&color(red){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 [#d02da86a]

** npm run build: WARNING in asset size limit: The following asset(s) exceed the recommended size limit [#q59498d2]

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

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

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


#hr();
コメント：
#comment_kcaptcha