修改 /build/webpack.prod.conf.js
文件配置以下:javascript
const webpackConfig = merge(baseWebpackConfig, { plugins: [ new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, // 如下两行配置,关闭 debug 和 console drop_debugger: true, drop_console: true } }, sourceMap: config.build.productionSourceMap, parallel: true }) ] })
修改 /config/index.js
文件配置以下:php
module.exports = { build: { /** * Source Maps */ productionSourceMap: false, // 把该项的配置修改成 false,关闭 source map // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map' } }
修改 /config/index.js
文件配置以下:css
module.exports = { build: { // 默认状况下 Gzip 关闭,由于许多流行的静态主机,如 Surge 或 Netlify 已经为您 gzip 全部静态资源。 // 将其配置为 true 以前,确保执行如下代码安装 compression-webpack-plugin 插件(默认是安装的最新版本): // npm install --save-dev compression-webpack-plugin productionGzip: true, // 开启 gzip 功能 productionGzipExtensions: ['js', 'css'] } }
修改 /build/webpack.prod.conf.js
文件配置以下:java
if (config.build.productionGzip) { const CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push( new CompressionWebpackPlugin({ // asset: '[path].gz[query]', // 原配置报错:ValidationError: Compression Plugin Invalid Options filename: '[path].gz[query]', // 将asset 修改成 filename 后又报错:TypeError: Cannot read property 'emit' of undefined,执行如下操做:npm install --save-dev compression-webpack-plugin@1.1.12 algorithm: 'gzip', test: new RegExp( '\\.(' + config.build.productionGzipExtensions.join('|') + ')$' ), threshold: 10240, minRatio: 0.8 }) ) }
修改服务器的配置,以 Nginx
为例,找到 conf 目录下的 nginx.conf
,开启 gzip,并设置 gzip 的类型,以下:webpack
gzip on; gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
开启 Gzip 的过程比较波折,请仔细查看注释信息,若有疑问请查看插件的官方文档:
compression-webpack-plugin 插件官方文档nginx