Home > Web Front-end > JS Tutorial > body text

How to deal with the package file size is too large

php中世界最好的语言
Release: 2018-06-09 10:30:24
Original
2163 people have browsed it

This time I will show you how to deal with a packaged file that is too large in size. What are the precautions for handling a packaged file that is too large? The following is a practical case, let’s take a look.

Optimization comparison:

Before optimization: index.html introduces a main.js file with a size of more than 2M.

After optimization: index.html introduces main.js, commons.js, charts.js, and other.js. In order to achieve the purpose of dividing main.js equally. Each file is controlled within 300k. (If you are happy, 100k is no problem)

A bunch of libraries and tools used:

vue, webpack, babel, highcharts, echarts, jquery, html2canvas****** I will omit some m codes here

Problem:

After using webpack in the development environment, I found a single js file of 5m.

The production environment is reduced to 2m with the help of vue-cli's webpack configuration.

Solution:

Search various solutions: require.ensure, require dependency, multiple entries, commonsChunkPlugin****Here are some solutions to save effort

There are too many solutions similar to the ones below, but they all fail to achieve the expected results

entry:{ 
 main:'xxx.js',
  chunks:['c1', 'c2'],
  commons:['jquery', 'highcharts', 'echarts','d3', 'xxxxx.js']  
}
 
plugins:{
new commonsChunkPlugin({
name:'commons',
minChunks:2
})  
}
Copy after login

Optimal solution:

entry:{ 
 main:'xxx.js'
}
 
plugins:{
 new commonsChunkPlugin({
 name:'commons',
 minChunks:function(module){
  // 下边return参考的vue-cli配置
  // any required modules inside node_modules are extracted to vendor
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(
   path.join(__dirname, '../node_modules')
   ) === 0
  )
 }
}) ,
// 以下才是关键
new commonsChunkPlugin({
 name:'charts',
 chunks:['commons'] 
 minChunks:function(module){
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(
   path.join(__dirname, '../node_modules')
   ) === 0 && ['jquery.js', 'highcharts.js','echarts'].indexOf( module.resource.substr(module.resource.lastIndexOf('/')+1).toLowerCase() ) != -1
  )
 }
}) // 如果愿意,可以再new 一个commonsChunkPlugin
 
}
Copy after login

I believe you have mastered it after reading the case in this article Method, for more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Vue component makes infinite multi-select menu

Install nodejs, npm and cnpm in Mac

The above is the detailed content of How to deal with the package file size is too large. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!