Fli*_*int 7 javascript compression webpack
我试图弄清楚如何正确使用带有压缩插件的webpack-html-plugin，后者的文档有点稀缺。
我的 webpack 配置声明：
output: {
filename: 'js/[name]-[hash].js',
压缩插件终于运行了
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip"
})
最后，脚本被正确生成和压缩。
js/app-caf3b4b3.js.gz 382 kB [emitted] [big]
我可以在index.html模板中声明 gzip 文件的预加载
<link rel="preload" href="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>.gz" as="script">
但是 webpack 负责插入这一行：
<script type="text/javascript" src="/js/app-caf3b4b3.js">
代替 <body></body>
如何让 webpack 使用压缩脚本？
您不需要在 html 中链接压缩文件。您必须在服务器端执行此操作。您还可以 gzip css 和 html 文件。
将您的服务器设置为使用 gzip 压缩发送文件，您还需要正确的标头来告诉浏览器如何解释该压缩文件。
如果您使用的是 Apache 服务器，您可以使用.htaccess文件启用 gzip 压缩。
我将它用于我的 Apache 服务器：
# enable the rewrite capabilities
RewriteEngine On
# prevents the rule from being overrided by .htaccess files in subdirectories
RewriteOptions InheritDownBefore
# provide a URL-path base (not a file-path base) for any relative paths in the rule's target
RewriteBase /
# GZIP
## allows you to have certain browsers uncompress information on the fly
AddEncoding gzip .gz
## serve gzip .css files if they exist and the client accepts gzip
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.css $1\.css\.gz [QSA]
## serve gzip .js files if they exist and the client accepts gzip
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.js $1\.js\.gz [QSA]
## serve gzip .html files if they exist and the client accepts gzip
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.html $1\.html\.gz [QSA]
## serve correct content types, and prevent mod_deflate double gzip
RewriteRule \.css\.gz$ - [T=text/css,E=no-gzip:1,E=is_gzip:1]
RewriteRule \.js\.gz$ - [T=text/javascript,E=no-gzip:1,E=is_gzip:1]
RewriteRule \.html\.gz$ - [T=text/html,E=no-gzip:1,E=is_gzip:1]
Header set Content-Encoding "gzip" env=is_gzip
您可以在 google 上搜索有关如何使用 gzip 压缩优化网站的更多信息。
https://gtmetrix.com/enable-gzip-compression.html
https://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
您可以通过SPA 应用程序或服务器端的Webpack 压缩插件来实现。我将回答我测试过的 Vue.js spa 的配置。除了配置文件名之外，React 和 Angular webpacks 不会有什么不同。
脚步：
vue.config.js如果文件不存在，则创建一个文件
沿着这些线添加一些东西
const CompressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = {
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: /\.(js|css)$/,
...
})
]
}
};
插件文档中提供了更多选项。
| 归档时间： |
|
| 查看次数： |
12262 次 |
| 最近记录： |