webpack

技术
/
webpack

算法

# 1. webpack 优化

https://blog.csdn.net/weixin_33873846/article/details/88036345 (opens new window)

对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低。当然了，我们是有办法优化的。

  1. 加快打包速度

    首先我们可以优化 Loader 的文件搜索范围，在使用 loader 时,我们可以指定哪些文件不通过 loader 处理,或者指定哪些文件通过 loader 处理。

    module.exports = {
  module: {
    rules: [
      {
        // js 文件才使用 babel
        test: /\.js$/,
        use: ['babel-loader'],
        // 只处理src文件夹下面的文件
        include: path.resolve('src'),
        // 不处理node_modules下面的文件
        exclude: /node_modules/,
      },
    ],
  },
}

  2. 减少 Webpack 打包后的文件体积

对图片进行压缩和优化

image-webpack-loader 这个 loder 可以帮助我们对打包后的图片进行压缩和优化，例如降低图片分辨率，压缩图片体积等。

module.exports = {
  // ...省略其他配置
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif|jpeg|ico)$/,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65,
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: '65-90',
                speed: 4,
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75,
              },
            },
          },
        ],
      },
    ],
  },
}

externals 外部扩展

从外部引入资源，或者在 src 外部放一个静态资源，从 HTML 中引入

例如，从 CDN 引入 jQuery，而不是把它打包： index.html

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous"
></script>

webpack.config.js

module.exports = {
  //...
  externals: {
    jquery: 'jQuery',
  },
}

title: webpack 及 vue 框架配置 lang: zh display: home description: webpack 及 vue 框架配置 image: https://picsum.photos/536/354?random&date=2021-04-12 (opens new window) date: 2019-09-21 tags:

  • webpack categories:
  • 技术

前端笔记

# 2. webpack 部分配置说明

module.exports = {
  // 入口，可以多个
  entry: {
    main: path.join(__dirname, '../../desktop/index.js'),
    gisLego: path.join(__dirname, '../../desktop/gisLego/index.js'),
    entComprehensive: path.join(
      __dirname,
      '../../desktop/entComprehensive/index.js'
    ),
  },
  // 出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
   mode: 'production',
  // 外部扩展。externals配置项用来告诉Webpack要构建的代码中使用了哪些不用被打包的模块，也就是说这些模版是外部环境提供的，
  // Webpack在打包时可以忽略它们
  externals: {
    echartsV5: 'echarts',
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT',
    moment: 'moment',
    Cesium: 'Cesium',
  },
  resolve: {
    // 使用到的后缀列表，导入的时候会自动找后缀，不需要app.vue再加后缀
    extensions: ['.js', '.json', '.sass', '.css', '.vue'],
    // 路径别名
    alias: {
      desktop: path.join(__dirname, '../../desktop'),
      common: path.join(__dirname, '../../desktop/common'),
      xg: path.join(__dirname, '../../desktop/xingong'),
      jb: path.join(__dirname, '../../desktop/jingbo'),
    },
  },
  module: {
    // loader 用来处理特定类型的文件。
    // 常见loader：sass-loader、postcss-loader、babel-loader、url-loader（处理图片类型资源）、vue-loader
    rules: [
      {
        test: /\.vue$/,
        use: {
          loader: 'vue-loader',
          options: {
            extractCSS: true,
          },
        },
      },
      {
        test: /\.js$/,
        use: 'happypack/loader?id=babel',
        exclude: /node_modules/,
      },
      {
        test: /\.(gif|jpg|png|woff|woff2|svg|eot|ttf|otf)\??.*$/,
        loader: 'url-loader',
        options: {
          limit: 8192,
          // publicPath: './',
        },
      },
    ],
  },
  //大文件告警
  performance: {
    hints: false,
  },
  // 优化
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      minChunks: 3,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      cacheGroups: {
        vendor: {
          test: /node_modules/,
          chunks: 'initial',
          minSize: 30000,
          minChunks: 3,
          maxInitialRequests: 3,
          name: config.vendorName,
          priority: 10,
        },
      },
    },
    runtimeChunk: {
      name: config.runtimeName,
    },
  },
  // loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
  plugins: [
    new CleanWebpackPlugin([config.distDir], {
      root: path.resolve(__dirname, '../../'), //根目录
    }),
    new HappyPack({
      id: 'babel',
      loaders: ['babel-loader?cacheDirectory=true'],
    }),
    new VueLoaderPlugin(),
    new webpack.ProgressPlugin(),
    new AppMetaPlugin(),
    //可以根据具体的项目部署将资源打包复制到指定文件夹
    new CopyWebpackPlugin([
      {
        from: QEarthSource,
        to: 'static',
      },
    ]),
  ],
}

# 2. 根据环境不同使用不同的配置，如接口地址

  • 修改 package.json 中的命令。 在不同环境时加上 --mode xxx，可以使当前环境 env 改变。默认 serve 为 development，build 为 production
"scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "build_test": "vue-cli-service --mode test build",
    "lint": "vue-cli-service lint"
  },

  • 在项目中使用 process.env.NODE_ENV 获取当前环境

  • 添加配置文件

    let API_CONFIG = {
  development: {
    LocationAPI: 'https://www.ctexcel.us/usctexcelxff/talos',
  },
  test: {
    LocationAPI: 'https://www.ctexcel.us/usctexcelxff/talos',
  },
  production: {
    LocationAPI: 'https://www.ctexcel.us/helios',
  },
}
export default API_CONFIG[process.env.NODE_ENV]

  • 使用时

    import { LocationAPI } from '@/productConfig.js'
css部分

css部分

css 部分