perf:gzip打包优化-build分支 图片压缩

build/webpack.prod.conf.js

-"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");
+  process.env.NODE_ENV === 'testing'
+    ? require('../config/test.env')
+    : require('../config/prod.env')
 
 // cdn 引入
-let externalModules = {};
+let externalModules = {}
 //cdn 配置
-let externalConfig = [];
-if (process.env.NODE_ENV === "production") {
+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'
-  };
+    vue: 'Vue',
+    'vue-router': 'VueRouter',
+    vuex: 'Vuex',
+    axios: 'axios',
+    'element-ui': 'element-ui',
+    echarts: 'echarts',
+    highlight: 'hljs',
+  }
   externalConfig = [
-    { js: "https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js", css: "" },
+    {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://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/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://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.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: '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: '',
+      css: 'https://cdn.bootcdn.net/ajax/libs/github-markdown-css/5.1.0/github-markdown-light.min.css',
     },
-    {js:'https://cdn.bootcdn.net/ajax/libs/vuex-persistedstate/4.1.0/vuex-persistedstate.es.min.js',css:''}
-  ];
+    {
+      js: '',
+      css: 'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css',
+    },
+  ]
 }
 
 const webpackConfig = merge(baseWebpackConfig, {
@@ -72,13 +74,13 @@ const webpackConfig = merge(baseWebpackConfig, {
   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: {
@@ -91,7 +93,7 @@ const webpackConfig = merge(baseWebpackConfig, {
     }),
     // 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`,
@@ -102,16 +104,16 @@ const webpackConfig = merge(baseWebpackConfig, {
     // duplicated CSS from different components can be deduped.
     new OptimizeCSSPlugin({
       cssProcessorOptions: config.build.productionSourceMap
-        ? { safe: true, map: { inline: false } }
-        : { safe: true },
+        ? {safe: true, map: {inline: false}}
+        : {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",
+        process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index,
+      template: 'index.html',
       inject: true,
       minify: {
         removeComments: true,
@@ -121,7 +123,7 @@ const webpackConfig = merge(baseWebpackConfig, {
         // 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
     }),
@@ -131,28 +133,28 @@ 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",
+      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,
     }),
@@ -160,37 +162,37 @@ const webpackConfig = merge(baseWebpackConfig, {
     // 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,
     })
-  );
+  )
 }
 
 if (config.build.bundleAnalyzerReport) {
   const BundleAnalyzerPlugin =
-    require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
-  webpackConfig.plugins.push(new BundleAnalyzerPlugin());
+    require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
 }
 
 if (config.build.isIgnoreLogs) {
-  const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+  const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
   let optimization = [
     new UglifyJsPlugin({
       uglifyOptions: {
@@ -198,14 +200,14 @@ if (config.build.isIgnoreLogs) {
           warnings: false,
           drop_debugger: true, //去掉debugger
           drop_console: true, // 去掉console
-          pure_funcs: ["console.log"], // 移除console
+          pure_funcs: ['console.log'], // 移除console
         },
       },
       sourceMap: config.build.productionSourceMap,
       parallel: true,
     }),
-  ];
-  webpackConfig.plugins.push(...optimization);
+  ]
+  webpackConfig.plugins.push(...optimization)
 }
 
-module.exports = webpackConfig;
+module.exports = webpackConfig

index.html

@@ -20,11 +20,12 @@
         overflow: hidden;
       }
     </style>
-    <!--    cdn -->
+    <!--    cdn css-->
     <% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.css){ %>
     <link href="<%= item.css %>" rel="stylesheet" />
     <% }}) %>
 <!--    -->
+
   </head>
   <!-- 阿里 -->
   <style type="text/css">
@@ -36,11 +37,12 @@
       overflow: hidden;
     }
   </style>
-  <!-- cdn -->
-  <% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.js && !htmlWebpackPlugin.options.onlyCss){ %>
+
+  <body>
+  <!-- cdn  js -->
+  <% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.js){ %>
   <script type="text/javascript" src="<%= item.js %>"></script>
   <% }}) %>
-  <body>
     <div id="app"></div>
     <div id="canvas">
       <div id="life"></div>

package.json

@@ -18,6 +18,7 @@
     "element-ui": "^2.14.1",
     "github-markdown-css": "^4.0.0",
     "highlight.js": "^10.5.0",
+    "image-webpack-loader": "^8.1.0",
     "js-cookie": "^3.0.1",
     "nprogress": "^0.2.0",
     "vue": "^2.5.2",

src/main.js

@@ -3,16 +3,17 @@
 // 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 cookies from 'vue-cookies'
 import App from './App'
-import importElementComponents from './importElement'
-import importEchartsComponents from './importEchartsComponents'
+// import importElementComponents from './importElement'
+// import importEchartsComponents from './importEchartsComponents'
 // 样式
 // import 'github-markdown-css/github-markdown.css'
+// import 'nprogress/nprogress.css'
 import 'highlight.js/styles/github.css'
-import 'nprogress/nprogress.css'
+
 
 const env = process.env.NODE_ENV
 // 生产环境
@@ -21,11 +22,11 @@ if (env === 'production') {
     // 路由
         const router = useRouter(Vue, VueRouter)
 
-        // 按需引入elementui
-        importElementComponents(Vue)
-
-        // 按需引入echarts
-        importEchartsComponents(Vue)
+        // // 按需引入elementui
+        // importElementComponents(Vue)
+        //
+        // // 按需引入echarts
+        // importEchartsComponents(Vue)
 
         Vue.config.productionTip = false
         Vue.use(cookies)