From 0c213cb74d4552a69cd956fdac3e5b7e85a5cdca Mon Sep 17 00:00:00 2001 From: yma16 <17685043634@163.com> Date: Tue, 26 Jul 2022 22:49:22 +0800 Subject: [PATCH] =?UTF-8?q?perf:gzip=E6=89=93=E5=8C=85=E4=BC=98=E5=8C=96-b?= =?UTF-8?q?uild=E5=88=86=E6=94=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/webpack.prod.conf.js | 184 +++++++++++++++++++++++++------------ config/index.js | 1 + index.html | 22 +++-- package.json | 2 +- src/main.js | 112 ++++++++++++++-------- src/store/index.js | 4 +- 6 files changed, 216 insertions(+), 109 deletions(-) diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index c1af961..b4210fa 100644 --- a/build/webpack.prod.conf.js +++ b/build/webpack.prod.conf.js @@ -1,51 +1,97 @@ -'use strict' -const path = require('path') -const utils = require('./utils') -const webpack = require('webpack') -const config = require('../config') -const merge = require('webpack-merge') -const baseWebpackConfig = require('./webpack.base.conf') -const CopyWebpackPlugin = require('copy-webpack-plugin') -const HtmlWebpackPlugin = require('html-webpack-plugin') -const ExtractTextPlugin = require('extract-text-webpack-plugin') -const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') -const UglifyJsPlugin = require('uglifyjs-webpack-plugin') +"use strict"; +const path = require("path"); +const utils = require("./utils"); +const webpack = require("webpack"); +const config = require("../config"); +const merge = require("webpack-merge"); +const baseWebpackConfig = require("./webpack.base.conf"); +const CopyWebpackPlugin = require("copy-webpack-plugin"); +const HtmlWebpackPlugin = require("html-webpack-plugin"); +const ExtractTextPlugin = require("extract-text-webpack-plugin"); +const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin"); +const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); -const env = process.env.NODE_ENV === 'testing' - ? require('../config/test.env') - : require('../config/prod.env') +const env = + process.env.NODE_ENV === "testing" + ? require("../config/test.env") + : require("../config/prod.env"); + +// cdn 引入 +let externalModules = {}; +//cdn 配置 +let externalConfig = []; +if (process.env.NODE_ENV === "production") { + //生产环境 + externalModules = { + vue: "Vue", + "vue-router": "VueRouter", + vuex: "Vuex", + axios: "axios", + "element-ui": "element-ui", + echarts: "echarts", + 'vuex-persistedstate':'persistedstate', + 'highlight':'hljs' + }; + externalConfig = [ + { js: "https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js", css: "" }, + { + js: "https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.1/vue-router.min.js", + css: "", + }, + { js: "https://unpkg.com/axios/dist/axios.min.js", css: "" }, + { js: "https://cdn.bootcss.com/vuex/3.6.2/vuex.min.js", css: "" }, + { + js: "https://unpkg.com/element-ui/lib/index.js", + css: "https://unpkg.com/element-ui/lib/theme-chalk/index.css", + }, + { + js: "https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js", + css: "", + }, + { + js: "https://cdn.bootcdn.net/ajax/libs/highlight.js/11.6.0/highlight.min.js", + css: "", + }, + { + js: "", + css: "https://cdn.bootcdn.net/ajax/libs/github-markdown-css/5.1.0/github-markdown-dark.css", + }, + {js:'https://cdn.bootcdn.net/ajax/libs/vuex-persistedstate/4.1.0/vuex-persistedstate.es.min.js',css:''} + ]; +} const webpackConfig = merge(baseWebpackConfig, { + externals: externalModules, //打包忽略 module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true, - usePostCSS: true - }) + usePostCSS: true, + }), }, devtool: config.build.productionSourceMap ? config.build.devtool : false, output: { path: config.build.assetsRoot, - filename: utils.assetsPath('js/[name].[chunkhash].js'), - chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') + filename: utils.assetsPath("js/[name].[chunkhash].js"), + chunkFilename: utils.assetsPath("js/[id].[chunkhash].js"), }, plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ - 'process.env': env + "process.env": env, }), new UglifyJsPlugin({ uglifyOptions: { compress: { - warnings: false - } + warnings: false, + }, }, sourceMap: config.build.productionSourceMap, - parallel: true + parallel: true, }), // extract css into its own file new ExtractTextPlugin({ - filename: utils.assetsPath('css/[name].[contenthash].css'), + filename: utils.assetsPath("css/[name].[contenthash].css"), // Setting the following option to `false` will not extract CSS from codesplit chunks. // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, @@ -57,26 +103,27 @@ const webpackConfig = merge(baseWebpackConfig, { new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } - : { safe: true } + : { safe: true }, }), // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // see https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ - filename: process.env.NODE_ENV === 'testing' - ? 'index.html' - : config.build.index, - template: 'index.html', + filename: + process.env.NODE_ENV === "testing" ? "index.html" : config.build.index, + template: "index.html", inject: true, minify: { removeComments: true, collapseWhitespace: true, - removeAttributeQuotes: true + removeAttributeQuotes: true, // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin - chunksSortMode: 'dependency' + chunksSortMode: "dependency", + cdnConfig: externalConfig, // cdn配置 + onlyCss: true, //dev下只加载css }), // keep module.id stable when vendor modules does not change new webpack.HashedModuleIdsPlugin(), @@ -84,66 +131,81 @@ const webpackConfig = merge(baseWebpackConfig, { new webpack.optimize.ModuleConcatenationPlugin(), // split vendor js into its own file new webpack.optimize.CommonsChunkPlugin({ - name: 'vendor', - minChunks (module) { + name: "vendor", + minChunks(module) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /\.js$/.test(module.resource) && - module.resource.indexOf( - path.join(__dirname, '../node_modules') - ) === 0 - ) - } + module.resource.indexOf(path.join(__dirname, "../node_modules")) === 0 + ); + }, }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({ - name: 'manifest', - minChunks: Infinity + name: "manifest", + minChunks: Infinity, }), // This instance extracts shared chunks from code splitted chunks and bundles them // in a separate chunk, similar to the vendor chunk // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk new webpack.optimize.CommonsChunkPlugin({ - name: 'app', - async: 'vendor-async', + name: "app", + async: "vendor-async", children: true, - minChunks: 3 + minChunks: 3, }), // copy custom myblog_static assets new CopyWebpackPlugin([ { - from: path.resolve(__dirname, '../myblog_static'), + from: path.resolve(__dirname, "../myblog_static"), to: config.build.assetsSubDirectory, - ignore: ['.*'] - } - ]) - ] -}) + ignore: [".*"], + }, + ]), + ], +}); if (config.build.productionGzip) { - const CompressionWebpackPlugin = require('compression-webpack-plugin') - + const CompressionWebpackPlugin = require("compression-webpack-plugin"); webpackConfig.plugins.push( new CompressionWebpackPlugin({ - filename: '[path].gz[query]', - algorithm: 'gzip', + filename: "[path].gz[query]", + algorithm: "gzip", test: new RegExp( - '\\.(' + - config.build.productionGzipExtensions.join('|') + - ')$' + "\\.(" + config.build.productionGzipExtensions.join("|") + ")$" ), threshold: 10240, - minRatio: 0.8 + minRatio: 0.8, }) - ) + ); } if (config.build.bundleAnalyzerReport) { - const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin - webpackConfig.plugins.push(new BundleAnalyzerPlugin()) + const BundleAnalyzerPlugin = + require("webpack-bundle-analyzer").BundleAnalyzerPlugin; + webpackConfig.plugins.push(new BundleAnalyzerPlugin()); +} + +if (config.build.isIgnoreLogs) { + const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); + let optimization = [ + new UglifyJsPlugin({ + uglifyOptions: { + compress: { + warnings: false, + drop_debugger: true, //去掉debugger + drop_console: true, // 去掉console + pure_funcs: ["console.log"], // 移除console + }, + }, + sourceMap: config.build.productionSourceMap, + parallel: true, + }), + ]; + webpackConfig.plugins.push(...optimization); } -module.exports = webpackConfig +module.exports = webpackConfig; diff --git a/config/index.js b/config/index.js index a38aeba..07f3229 100644 --- a/config/index.js +++ b/config/index.js @@ -81,6 +81,7 @@ module.exports = { productionGzip: true, productionGzipExtensions: ["js", "css"], + isIgnoreLogs:true, // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` diff --git a/index.html b/index.html index af7df62..c41bc2b 100644 --- a/index.html +++ b/index.html @@ -6,23 +6,25 @@ yma16前端日记 + + <% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.css){ %> + + <% }}) %> + - + + <% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.js && !htmlWebpackPlugin.options.onlyCss){ %> + + <% }}) %>
@@ -43,8 +48,9 @@
- - + + + diff --git a/package.json b/package.json index 36575cc..8c5e175 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ "selenium-server": "^3.0.1", "semver": "^5.3.0", "shelljs": "^0.7.6", - "uglifyjs-webpack-plugin": "^1.1.1", + "uglifyjs-webpack-plugin": "^1.3.0", "url-loader": "^0.5.8", "vue-cli-plugin-axios": "0.0.4", "vue-loader": "^13.3.0", diff --git a/src/main.js b/src/main.js index d6849f1..2ede905 100644 --- a/src/main.js +++ b/src/main.js @@ -1,52 +1,90 @@ // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. -import Vue from 'vue' -import VueRouter from 'vue-router' -import axios from 'axios' -import cookies from 'vue-cookies' -import hljs from 'highlight.js' +// import Vue from 'vue' +// import VueRouter from 'vue-router' +// import axios from 'axios' +// import cookies from 'vue-cookies' +// import hljs from 'highlight.js' import useRouter from './router' import App from './App' import importElementComponents from './importElement' import importEchartsComponents from './importEchartsComponents' - // 样式 -import 'github-markdown-css/github-markdown.css' +// import 'github-markdown-css/github-markdown.css' import 'highlight.js/styles/github.css' import 'nprogress/nprogress.css' -// 路由 -const router = useRouter(Vue, VueRouter) +const env = process.env.NODE_ENV +// 生产环境 +if (env === 'production') { + try { + // 路由 + const router = useRouter(Vue, VueRouter) + + // 按需引入elementui + importElementComponents(Vue) + + // 按需引入echarts + importEchartsComponents(Vue) + + Vue.config.productionTip = false + Vue.use(cookies) + Vue.use(hljs) + Vue.directive('highlight', function (el) { + const blocks = el.querySelectorAll('pre code') + blocks.forEach((block) => { + hljs.highlightBlock(block) + }) + }) + // cookie + Vue.prototype.$cookies = cookies + // axios + Vue.use(axios) + Vue.prototype.$axios = axios + window.$axios_w = axios -// 按需引入elementui -importElementComponents(Vue) + Vue.prototype.$cookies.set('user_session', 'null') -// 按需引入echarts -importEchartsComponents(Vue) + new Vue({ + el: '#app', + router, + components: { App }, + template: '' + }) + } catch (e) { + throw Error(e) + } +} else { + // 路由 + const router = useRouter(Vue, VueRouter) -Vue.config.productionTip = false -Vue.use(cookies) + // 按需引入elementui + importElementComponents(Vue) -Vue.use(hljs) -Vue.directive('highlight', function (el) { - const blocks = el.querySelectorAll('pre code') - blocks.forEach(block => { - hljs.highlightBlock(block) + // 按需引入echarts + importEchartsComponents(Vue) + + Vue.config.productionTip = false + Vue.use(cookies) + + Vue.use(hljs) + Vue.directive('highlight', function (el) { + const blocks = el.querySelectorAll('pre code') + blocks.forEach((block) => { + hljs.highlightBlock(block) + }) + }) + // cookie + Vue.prototype.$cookies = cookies + // axios + Vue.use(axios) + Vue.prototype.$axios = axios + window.$axios_w = axios + Vue.prototype.$cookies.set('user_session', 'null') + new Vue({ + el: '#app', + router, + components: { App }, + template: '' }) -}) -// cookie -Vue.prototype.$cookies = cookies -// axios - -Vue.use(axios) -Vue.prototype.$axios = axios -window.$axios_w = axios - -Vue.prototype.$cookies.set('user_session', 'null') - -new Vue({ - el: '#app', - router, - components: { App }, - template: '' -}) +} diff --git a/src/store/index.js b/src/store/index.js index 56a2d66..b1f7a9c 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,5 +1,5 @@ -import Vue from 'vue' -import Vuex from 'vuex' +// import Vue from 'vue' +// import Vuex from 'vuex' import persistedstate from 'vuex-persistedstate' -- GitLab