Skip to content

C
CivManage
Commit f4d255e2 authored by 邓超's avatar 邓超
Browse files
Options

fix: webpack打包速度优化

parent 64d50bfb
Pipeline #69756 waiting for manual action with stages
          Hide whitespace changes
          Inline Side-by-side
          Showing with 158 additions and 133 deletions
          internals/webpack/webpack.base.babel.js
          View file @ f4d255e2
          const os = require('os');
          const path = require('path'); const path = require('path');
          const webpack = require('webpack'); const webpack = require('webpack');
          const slash = require('slash2'); const slash = require('slash2');
          const CopyPlugin = require('copy-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin');
          const cesiumSource = './node_modules/cesium/Build/Cesium'; const cesiumSource = './node_modules/cesium/Build/Cesium';
          const FastRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); const FastRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
          // cpu核数
          const threads = os.cpus().length;
          const nodeLibs = require('node-libs-browser'); const nodeLibs = require('node-libs-browser');
          console.log(); console.log();
          module.exports = options => ({ module.exports = options => ({
          ...@@ -27,158 +30,176 @@ module.exports = options => ({ ...@@ -27,158 +30,176 @@ module.exports = options => ({
          module: { module: {
          rules: [ rules: [
          { {
          test: /\.[jt]sx?$/, oneOf: [
          exclude: /node_modules/, {
          use: { test: /\.[jt]sx?$/,
          loader: 'babel-loader', exclude: /node_modules/,
          options: options.babelQuery, use: [
          // options: { {
          // presets: ['@babel/preset-typescript'], loader: 'thread-loader', // 开启多进程
          // plugins: ['@babel/plugin-proposal-optional-chaining'], options: {
          // }, workers: threads, // 数量
          }, },
          }, },
          { {
          // Preprocess our own .css files loader: 'babel-loader',
          // This is the place to add your own loaders (e.g. sass/less etc.) options: {
          // for a list of loaders, see https://webpack.js.org/loaders/#styling ...options.babelQuery,
          test: /\.css$/, cacheDirectory: true, // 开启babel编译缓存
          exclude: /node_modules/, cacheCompression: false, // 缓存文件不要压缩
          use: ['style-loader', 'css-loader'], },
          }, // options: {
          { // presets: ['@babel/preset-typescript'],
          test: /\.less$/, // plugins: ['@babel/plugin-proposal-optional-chaining'],
          // },
          use: [ },
          ],
          },
          { {
          loader: 'style-loader', // Preprocess our own .css files
          // This is the place to add your own loaders (e.g. sass/less etc.)
          // for a list of loaders, see https://webpack.js.org/loaders/#styling
          test: /\.css$/,
          exclude: /node_modules/,
          use: ['style-loader', 'css-loader'],
          }, },
          { {
          loader: 'css-loader', test: /\.less$/,
          options: {
          modules: {
          // localIdentName: '[name]__[local]___[hash:base64:5]'
          // modules: true,
          getLocalIdent: (context, _, localName) => {
          if (/@wisdom-cesium/.test(context.resourcePath)) { use: [
          const matchRule = slash(context.resourcePath).match(/@wisdom-cesium\/(krpano)(.*).less$/) {
          if (matchRule && matchRule[2]) { loader: 'style-loader',
          if (/rc-slider/.test(matchRule[0])) { },
          return localName {
          loader: 'css-loader',
          options: {
          modules: {
          // localIdentName: '[name]__[local]___[hash:base64:5]'
          // modules: true,
          getLocalIdent: (context, _, localName) => {
          if (/@wisdom-cesium/.test(context.resourcePath)) {
          const matchRule = slash(context.resourcePath).match(
          /@wisdom-cesium\/(krpano)(.*).less$/,
          );
          if (matchRule && matchRule[2]) {
          if (/rc-slider/.test(matchRule[0])) {
          return localName;
          }
          const className = matchRule[2]
          .split('/')
          .map(a => a.replace(/([A-Z])/g, '-$1'))
          .map(a => a.toLowerCase())
          .join('-');
          return `panda-krpano-${className}-${localName}`.replace(/--/g, '-');
          }
          return localName;
          } }
          const className = matchRule[2].
          split('/')
          .map(a => a.replace(/([A-Z])/g, '-$1'))
          .map(a => a.toLowerCase()).join('-')
          return `panda-krpano-${className}-${localName}`.replace(/--/g, '-')
          }
          return localName
          }
          if ( if (
          context.resourcePath.includes('node_modules') || context.resourcePath.includes('node_modules') ||
          context.resourcePath.includes('ant.design.pro.less') || context.resourcePath.includes('ant.design.pro.less') ||
          context.resourcePath.includes('global.less') context.resourcePath.includes('global.less')
          ) { ) {
          return localName; return localName;
          } }
          const match = context.resourcePath.match(/src(.*)/); const match = context.resourcePath.match(/src(.*)/);
          const matchAntd = /^ant/.test(localName); const matchAntd = /^ant/.test(localName);
          if (match && match[1] && !matchAntd) { if (match && match[1] && !matchAntd) {
          const antdProPath = match[1].replace('.less', ''); const antdProPath = match[1].replace('.less', '');
          const arr = slash(antdProPath) const arr = slash(antdProPath)
          .split('/') .split('/')
          .map(a => a.replace(/([A-Z])/g, '-$1')) .map(a => a.replace(/([A-Z])/g, '-$1'))
          .map(a => a.toLowerCase()); .map(a => a.toLowerCase());
          return `panda-pro${arr.join('-')}-${localName}`.replace(/--/g, '-'); return `panda-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
          } }
          return localName; return localName;
          },
          },
          }, },
          }, },
          }, {
          loader: 'less-loader',
          options: {
          javascriptEnabled: true,
          },
          },
          ],
          }, },
          { {
          loader: 'less-loader', test: /\.css$/,
          options: { include: /node_modules/,
          javascriptEnabled: true, use: ['style-loader', 'css-loader'],
          },
          }, },
          ],
          },
          {
          test: /\.css$/,
          include: /node_modules/,
          use: ['style-loader', 'css-loader'],
          },
          {
          test: /\.(eot|otf|ttf|woff|woff2)$/,
          use: 'file-loader',
          },
          {
          test: /\.svg$/,
          use: [
          { {
          loader: 'svg-url-loader', test: /\.(eot|otf|ttf|woff|woff2)$/,
          options: { use: 'file-loader',
          // Inline files smaller than 10 kB },
          limit: 10 * 1024, {
          noquotes: true, test: /\.svg$/,
          }, use: [
          {
          loader: 'svg-url-loader',
          options: {
          // Inline files smaller than 10 kB
          limit: 10 * 1024,
          noquotes: true,
          },
          },
          ],
          },
          {
          test: /\.(jpg|png|gif)$/,
          use: [
          {
          loader: 'url-loader',
          options: {
          // Inline files smaller than 10 kB
          limit: 10 * 1024,
          outputPath: 'assets/',
          // name: '[name].[ext]'
          },
          },
          // {
          // loader: 'image-webpack-loader',
          // options: {
          // mozjpeg: {
          // enabled: false,
          // // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
          // // Try enabling it in your environment by switching the config to:
          // // enabled: true,
          // // progressive: true,
          // },
          // gifsicle: {
          // interlaced: false,
          // },
          // optipng: {
          // optimizationLevel: 7,
          // },
          // pngquant: {
          // quality: '65-90',
          // speed: 4,
          // },
          // },
          // },
          ],
          }, },
          ],
          },
          {
          test: /\.(jpg|png|gif)$/,
          use: [
          { {
          loader: 'url-loader', test: /\.html$/,
          options: { use: 'html-loader',
          // Inline files smaller than 10 kB },
          limit: 10 * 1024, {
          outputPath: 'assets/', test: /\.(mp4|webm)$/,
          // name: '[name].[ext]' use: {
          loader: 'url-loader',
          options: {
          limit: 10000,
          },
          }, },
          }, },
          // {
          // loader: 'image-webpack-loader',
          // options: {
          // mozjpeg: {
          // enabled: false,
          // // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
          // // Try enabling it in your environment by switching the config to:
          // // enabled: true,
          // // progressive: true,
          // },
          // gifsicle: {
          // interlaced: false,
          // },
          // optipng: {
          // optimizationLevel: 7,
          // },
          // pngquant: {
          // quality: '65-90',
          // speed: 4,
          // },
          // },
          // },
          ], ],
          }, },
          {
          test: /\.html$/,
          use: 'html-loader',
          },
          {
          test: /\.(mp4|webm)$/,
          use: {
          loader: 'url-loader',
          options: {
          limit: 10000,
          },
          },
          },
          ], ],
          }, },
          plugins: options.plugins.concat([ plugins: options.plugins.concat([
          ......
          internals/webpack/webpack.prod.babel.js
          View file @ f4d255e2
          // Important modules this config uses // Important modules this config uses
          const os = require('os');
          const path = require('path'); const path = require('path');
          const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
          const WebpackPwaManifest = require('webpack-pwa-manifest'); const WebpackPwaManifest = require('webpack-pwa-manifest');
          ...@@ -7,6 +8,8 @@ const WebpackPwaManifest = require('webpack-pwa-manifest'); ...@@ -7,6 +8,8 @@ const WebpackPwaManifest = require('webpack-pwa-manifest');
          const TerserPlugin = require('terser-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin');
          const CompressionPlugin = require('compression-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin');
          // cpu核数
          const threads = os.cpus().length;
          module.exports = require('./webpack.base.babel')({ module.exports = require('./webpack.base.babel')({
          mode: 'production', mode: 'production',
          ...@@ -39,7 +42,7 @@ module.exports = require('./webpack.base.babel')({ ...@@ -39,7 +42,7 @@ module.exports = require('./webpack.base.babel')({
          ascii_only: true, ascii_only: true,
          }, },
          }, },
          parallel: true, parallel: threads, // 开启多进程
          cache: true, cache: true,
          sourceMap: true, sourceMap: true,
          }), }),
          ......
          package.json
          View file @ f4d255e2
          ...@@ -265,6 +265,7 @@ ...@@ -265,6 +265,7 @@
          "stylelint-processor-styled-components": "1.6.0", "stylelint-processor-styled-components": "1.6.0",
          "svg-url-loader": "2.3.2", "svg-url-loader": "2.3.2",
          "terser-webpack-plugin": "4.2.3", "terser-webpack-plugin": "4.2.3",
          "thread-loader": "^3.0.4",
          "url-loader": "1.1.2", "url-loader": "1.1.2",
          "webpack": "5.70.0", "webpack": "5.70.0",
          "webpack-cli": "4.2.0", "webpack-cli": "4.2.0",
          ......
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment