In the past, we used the command of webpack – color – progress to package the vue.js project directly. There was only one build.js file for the packaged project. It was just a common small website project, but it had 2.9MB. It was put on the Alibaba cloud server with a loan of 2 trillion. It took four or five minutes for the first time to load, which was very slow. After searching various methods, the problem was finally solved as follows:
-
Using lazy load reference routing module
The original import [route name] from [route path] method is changed to component: resolve = > require ([route path], resolve). After the import method is changed to lazy load, the page will load faster for the first time, and the sequence. Build.js file corresponding to the route module will be generated in the dist directory. When the default module is loaded, the page will load the JS file of the corresponding module asynchronously.
const routes =[ { path: '/', name:'Home', component: resolve => require(['./templet/mainTem/Home.vue'],resolve) },//default page { path:'/Foodlist', name:'Foodlist', component: resolve => require(['./templet/mainTem/Foodlist.vue'],resolve) },//Menu { path:'/Select', name:'Select', component: resolve => require(['./templet/mainTem/Select.vue'],resolve) },//classification { path:'/Hotnews', name:'Hotnews', component: resolve => require(['./templet/mainTem/Hotnews.vue'],resolve) },//Popular articles { path:'/Itemlist', name:'Itemlist', component: resolve => require(['./templet/mainTem/Itemlist.vue'],resolve) },//Recipe details { path:'/Suggestion', name:'Suggestion', component: resolve => require(['./templet/mainTem/Suggestion.vue'],resolve) },//Feedback { path:'/About', name:'About', component: resolve => require(['./templet/mainTem/About.vue'],resolve) },//about { path:'/FriendsLink', name:'FriendsLink', component: resolve => require(['./templet/mainTem/FriendsLink.vue'],resolve) },//Friendship links { path:'/Advertising', name:'Advertising', component: resolve => require(['./templet/mainTem/Advertising.vue'],resolve) }//Advertising cooperation ] export default routes
As shown in the figure: 
- Set webpack.config.js
Comment out devtool: "Eval source map", avoid redundant console.log or other debug code, and compress the size of the package file.
var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: 'dist/', filename: 'build.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } }, { test: /\.css$/, loader: "style-loader!css-loader", // options: { // name: '[name].[ext]?[hash]' // } }, { test: /\.less$/, loader: "style-loader!css-loader!less-loader", }, { test: /\.(png|jpg|gif|svg|woff|ttf|eot|woff2)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } }, ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, // devtool: '#eval-source-map'//Comment out } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }