This is the 6th day of my participation in the August More Text Challenge

Webpack packages have a lot of properties, and generally use the default configuration. When there is a problem, you will consult the documentation, configure the properties, summarize, review the past and know the new

Webpack package optimization

  1. First remove the default productionmapThe js file at the end, which takes up almost half of the js folder, is unnecessary. locationconfig/index.jsSet up theproductionSourceMap: false
productionSourceMap: false.Copy the code
  1. Use the GIZP compression tool provided with WebPackconfig/index.jsFound in theproductionGzipChange the default false to true, but we need to download it firstcompression-webpack-pluginExecute directly in the projectnpm install –save-dev compression-webpack-pluginCan be
productionGzip: true.Copy the code
  1. JQuery, Echarts, elementUI, AxiosAnd so on, there are CDN links, using CDN inindex.htmlReferences can also be downloaded from static resources inindex.htmlThe introduction of
// 1. Add externals to webpack.base.conf.js
externals: {
  'vue': 'Vue'.'element-ui': 'ElementUI'./ / or ELEMENT
}

// 2, main.js comment out elemental-ui
import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)


// 3, index. HTML needs to introduce vue first, then elementui
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.4.11/index.js"></script>
Copy the code

Config.js attributes

1.publicPath

  • Type: string
  • Default: ‘/’
  • The base URL when deploying the application package,
  • The usage is consistent with the output.publicpath of webpack itself.
  • This value can also be set to an empty string (”) or a relative path (‘./’), so that all resources are linked to a relative path, so that the output package can be deployed in any path.

2.outputDir

  • Type: string
  • Default: ‘dist’
  • Output file directory, which is the directory of the production environment build file generated when vue-cli-service build is run. Note that the target directory is cleared before building (passing –no-clean at build time turns this behavior off).

3.assetsDir

  • Type: string
  • Default: ”
  • Directory where static resources (JS, CSS, IMG, fonts) are generated.

4.indexPath

  • Type: string
  • Default: ‘index.html’
  • Specify the output path of the generated index.html (relative to outputDir). It could be an absolute path.

5.filenameHashing

  • Type: boolean
  • Default: true
  • By default, generated static resources include hash in their file names for better cache control. However, this also requires that the HTML for index be automatically generated by the Vue CLI. If you cannot use index HTML generated by the Vue CLI, you can turn off file name hashing by setting this option to false.

6.lintOnSave

  • Type: boolean | ‘error’
  • Default: true
  • Whether to use it when savingeslint-loaderCheck. Valid values:ture | false | "error"When set to"error"The error detected triggers a compilation failure.

7.productionSourceMap

  • Type: boolean
  • Default: true
  • If you don’t need the source map for your production environment, set it to false to speed up your production build.

See the following figure for additional Settings

The above is some configuration of config, record, review the old know new!