项目打包js文件过大
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[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 Serv...
- 动态内容压缩
- 静态内容压缩
***第二步 修改IIS设置 [#wbd6c6df]
IIS的配置里面打开“压缩”，开启动态和静态内容压缩
在C:\Windows\System32\inetsrv\config目录，编辑application...
#codeprettify{{
<add mimeType="application/json" enabled="true" />
<add mimeType="application/json;charset=utf-8" enabled="...
}}
变成
#codeprettify{{
<httpCompression directory="%SystemDrive%\inetpub\temp\II...
<scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip....
<dynamicTypes>
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="application/x-javascript" enabled="tr...
<add mimeType="application/javascript" enabled="true...
<add mimeType="application/json" enabled="true" />
<add mimeType="application/json;charset=utf-8" enabl...
<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" enabl...
<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 Plug...
- options has an unknown property 'asset'. These propert...
object { test?, include?, exclude?, algorithm?, compre...
}}
对策：~
修改 build\webpack.prod.conf.js ，找到如下内容，将 assert...
#codeprettify{{
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
//filename: '[path].gz[query]',
filename: '[path][base].gz[query]', //使用这个否则报...
algorithm: 'gzip',
test: new RegExp('\\.(' + config.build.productionGzip...
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-anal...
// 然后plugins里面，添加配置：
plugins: [
new BundleAnalyzerPlugin()
]
}}
在package.json文件中配置：
#codeprettify{{
"scripts": {
"analyzer": "NODE_ENV=production npm_config_report=tr...
}
}}
运行 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...
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.mi...
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui/di...
}}
在webpack.base.conf.js文件中添加以下配置
#codeprettify{{
module.exports = {
...
externals: {
'vue': 'Vue',
'nutui': 'nutui',
},
//如果是vue-cli3以上版本的话没有webpack.base.conf.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...
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.mi...
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui/di...
}}
还可以按需引入组件库
#codeprettify{{
<body>
<div id="app"><nut-button>CDN按需加载</nut-button></div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!-- 引入样式 -->
<link rel="stylesheet"href="https://cdn.jsdelivr.net/npm...
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.j...
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui/d...
<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...
一些参考：
https://github.com/zp1112/blog/issues/2
https://www.jb51.net/article/252159.htm
https://blog.csdn.net/qq_38998250/article/details/121772...
https://blog.51cto.com/u_15127641/2754804
* Troubleshooting [#d02da86a]
** npm run build: WARNING in asset size limit: The follow...
webpack升级webpack4后打包出现文件大小警告提示。~
实际项目中没有 webpack.config.js 文件时，修改webpack.base...
#codeprettify{{
module.exports = {
performance: {
hints: 'warning',
//入口起点的最大体积 整数类型（以字节为单位）
maxEntrypointSize: 50000000,
//生成文件的最大体积 整数类型（以字节为单位 300k）
maxAssetSize: 30000000,
//只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.css') || assetFilen...
}
},
mode: process.env.NODE_ENV === 'production' ? 'producti...
context: path.resolve(__dirname, '../'),
entry: {
app: ["babel-polyfill", "./src/main.js"]
},
........
}
}}
#hr();
コメント：
#comment_kcaptcha
終了行:
[[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 Serv...
- 动态内容压缩
- 静态内容压缩
***第二步 修改IIS设置 [#wbd6c6df]
IIS的配置里面打开“压缩”，开启动态和静态内容压缩
在C:\Windows\System32\inetsrv\config目录，编辑application...
#codeprettify{{
<add mimeType="application/json" enabled="true" />
<add mimeType="application/json;charset=utf-8" enabled="...
}}
变成
#codeprettify{{
<httpCompression directory="%SystemDrive%\inetpub\temp\II...
<scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip....
<dynamicTypes>
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="application/x-javascript" enabled="tr...
<add mimeType="application/javascript" enabled="true...
<add mimeType="application/json" enabled="true" />
<add mimeType="application/json;charset=utf-8" enabl...
<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" enabl...
<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 Plug...
- options has an unknown property 'asset'. These propert...
object { test?, include?, exclude?, algorithm?, compre...
}}
对策：~
修改 build\webpack.prod.conf.js ，找到如下内容，将 assert...
#codeprettify{{
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
//filename: '[path].gz[query]',
filename: '[path][base].gz[query]', //使用这个否则报...
algorithm: 'gzip',
test: new RegExp('\\.(' + config.build.productionGzip...
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-anal...
// 然后plugins里面，添加配置：
plugins: [
new BundleAnalyzerPlugin()
]
}}
在package.json文件中配置：
#codeprettify{{
"scripts": {
"analyzer": "NODE_ENV=production npm_config_report=tr...
}
}}
运行 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...
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.mi...
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui/di...
}}
在webpack.base.conf.js文件中添加以下配置
#codeprettify{{
module.exports = {
...
externals: {
'vue': 'Vue',
'nutui': 'nutui',
},
//如果是vue-cli3以上版本的话没有webpack.base.conf.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...
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.mi...
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui/di...
}}
还可以按需引入组件库
#codeprettify{{
<body>
<div id="app"><nut-button>CDN按需加载</nut-button></div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!-- 引入样式 -->
<link rel="stylesheet"href="https://cdn.jsdelivr.net/npm...
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.j...
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui/d...
<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...
一些参考：
https://github.com/zp1112/blog/issues/2
https://www.jb51.net/article/252159.htm
https://blog.csdn.net/qq_38998250/article/details/121772...
https://blog.51cto.com/u_15127641/2754804
* Troubleshooting [#d02da86a]
** npm run build: WARNING in asset size limit: The follow...
webpack升级webpack4后打包出现文件大小警告提示。~
实际项目中没有 webpack.config.js 文件时，修改webpack.base...
#codeprettify{{
module.exports = {
performance: {
hints: 'warning',
//入口起点的最大体积 整数类型（以字节为单位）
maxEntrypointSize: 50000000,
//生成文件的最大体积 整数类型（以字节为单位 300k）
maxAssetSize: 30000000,
//只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.css') || assetFilen...
}
},
mode: process.env.NODE_ENV === 'production' ? 'producti...
context: path.resolve(__dirname, '../'),
entry: {
app: ["babel-polyfill", "./src/main.js"]
},
........
}
}}
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
