Into the company took over a “second-hand” simple management background system, with the business development of the company, the management background is not the original cute, become a greasy dead fat.

And then there are all kinds of after-effects…

First record an optimization vUE packaging optimization.

Webpack greatly simplifies the front end automation configuration, but the packaging speed is not satisfactory, first of all, I think

One optimization method: CDN

Json >dependencies (package.json>dependencies) do not participate in the package construction and are introduced through the CDN

Test result: after the project test, save a lot of time.

// index.html

 <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.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
 <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script>
 <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.js"></script>
 <script src="https://unpkg.com/element-ui/lib/index.js"></script> <! --<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>--> <! --<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>--> <! --<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>--> <! --<script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>--> <! --<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
Copy the code

// build > webpack.base.conf.js

module.exports = {
  context: path.resolve(__dirname, '.. / '),
  entry: {
    app: './src/main.js'
  },
  externals:{
  // 'Imported resource name': 'External resource name'
    'vue': 'Vue'.'vue-router': 'VueRouter'.'vuex':'Vuex'.'element-ui': 'ELEMENT'.'echarts': 'echarts',}}Copy the code

This way, third-party libraries are not packaged into Vendor.

** The use of imported resources must be consistent with the externals exposed variable. **

See WebPack external Extension portal for details

Optimization method two: subcontracting

// router > index.js

// This is the previous import method import Label from'@/components/label'
import Login from '@/pages/test1'
import Home from '@/pages/test2'Const Label = r => require. Ensure ([], () => r(require())'@/components/Label')), 'chunkname1')
const Login = r => require.ensure([], () => r(require('@/pages/test1')), 'chunkname2')
const Home = r => require.ensure([], () => r(require('@/pages/test2')), 'chunkname3')
Copy the code

After such modification, app.js will be divided into three JS files, and the corresponding router will load the corresponding JS files to ease the first screen rendering speed.

Optimization 3: Compress your code

Vue-cli has used the UglifyJsPlugin plug-in to compress the code, which can be set to the following configuration:

// build > webpack.prod.conf.js

compress: {
  warnings: false,
  drop_console: true,
  pure_funcs: ['console.log']},sourceMap: false
})
Copy the code

SourceMap: false disables the debugging function.

If set to true, a.map ending JS file is generated in the deployment package. It is used to debug code when it is confused with compression. This feature is good, but it greatly increases the size of the overall resource pack, so disable it.

Currently only optimized these, there are wrong or omission, but also please light spray…