【webpack篇】工程化裏，如何優化本身的項目

時間 2020-02-09

標籤 webpack篇工程如何優化本身項目简体版

原文原文鏈接

寫在前面

由於業務關係，涉及到的新老業務較多。所以接觸過webpack早期與後期的階段。
以及vue-cli二、三、4
咱們如今已經在使用vue-cli4了css

老生常談的幾個優化操做

Dll

剝離公用資源

如何使用（vue-li三、4）的小夥伴能夠看如下html

先將dll配置文件寫好
webpack.dll.config.js前端

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const utils = require('../config/utils');
const packageSysName = require('../package.json').name;
// 這個操做是獲取name,打包的時候植入本身的對應的系統 可刪除
const sysName = utils.getSystemName(packageSysName);
// 這個操做是獲取name,打包的時候植入本身的對應的系統 可刪除
const resolve = dir => path.join(__dirname, '..', dir);

module.exports = {
  entry: {
    vue: ['vue', 'vuex', 'vue-router', 'axios'],
    ec: ['echarts'],
    utils: ['moment'],
    ui: ['element-ui']
  },
  // devtool:'source-map',
  output: {
    path: path.join(__dirname, '..', 'public/vendor'),
    filename: '[name].dll.js',
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '..', 'public/vendor', '[name]-manifest.json'),
      name: '[name]_[hash]',
      context: process.cwd()
    }),
    new CopyWebpackPlugin([{
      from: resolve('./public/vendor'),
      to: resolve(`./dist/resources/${sysName}/assets/vendor`),
      toType: 'dir'
    }])
  ],
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm.js'
    }
    
    
  }
};

引入此配置文件於vue.config.js中（vue-cli三、4）vue

dllEntry.forEach(dll => {

    result.push(`resources/${sysName}/assets/vendor/${dll}.dll.js`)


  });
  if (IS_PROD) {
    Object.keys(externalsMaps.map).forEach(exter => {
      const {
        name,
        version
      } = externalsMaps.map[exter];
      result.push(`${name}/v${version}/${name}.js`);
      result.push(`${name}/v${version}/${name}.css`);
    });
  }
  return result;

最後使用 html-webpack-tags-plugin 此插件
對其生成的文件在編譯過程當中自動插入html文件中webpack

靜態資源的處理

將css資源單獨打包

如下提供案例是webpack 4.39.2的ios

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // all options are optional
      filename: `${name}.css`,
      chunkFilename: '[name].chunk.css'
    });
   
   //loader部分
   {
        test: /\.scss$/,
        use: [{
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === 'development'
            }
          },
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }

img

圖片文件咱們分爲幾個策略
通常的icon以及小文件，使用svg-sprite的模式進行打包。svg能夠改變顏色，這在icon裏是十分好用的，由於icon大多都有不一樣的狀態。
如下提供案例依舊是vue-cli4的nginx

config.module
      .rule("images")

      .test(/\.(svg|png|jpe?g|gif|webp)(\?.*)?$/)
      .exclude
      .add(resolve('src/assets/image/icons'))
      .add(resolve('src/components/menu/icon'))
      .add(resolve('src/assets/image/crmMonitor/process'))
      .end()
      .use('url-loader')
      .tap(options => merge(options, {
        limit: 8192,  //限制圖片大小，小的圖片將轉化爲base64
        fallback: {
          loader: 'file-loader',
          options: {
            name: IS_PROD ? `${staticResource}/img/[name].[ext]` : `img/[name].[ext]`
          }
        }
      }));
      
      
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include
      .add(resolve('src/assets/image/icons')) //處理svg目錄
      .add(resolve('src/components/menu/icon'))
      .add(resolve('src/assets/image/crmMonitor/process'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      });