With the continuous development of Web front-end technology, Vue.js has become a very popular front-end framework. Vue-cli and Webpack in Vue.js have also become necessary supporting tools as build tools. When developing projects, we usually use Vue-cli to build the application framework and use Webpack to package and publish the project. However, in the process of packaging and releasing large projects, due to the large size of the project, problems such as slow compilation speed, large packaging volume, and slow access speed may occur. In order to avoid these problems, this article will introduce Vue-cli and Webpack packaging. Release optimization guide to help developers better optimize the release effects of large projects.
1. Vue-cli project optimization
During the development process, we usually use jQuery, Bootstrap, Third-party libraries such as Echarts, but introducing the entire library may cause problems such as excessive packaging size and slow access speed. Therefore, we can use thebabel-plugin-componentplugin to introduce on-demand.
Set inbabel.config.js:
plugins: [ ['component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' }] ]
TakingElement-uias an example, use the plug-in to introduce the library on demand, you can Greatly reduce packaging volume.
We can modify the configuration properties of Webpack by modifying thevue.config.jsfile. The following are some commonly used Webpack attribute configuration methods:
// 修改输出文件名格式 output: { filename: '[name].[hash].js' } // 修改 publicPath publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/' // 压缩代码 uglifyOptions: { compress: { warnings: false, drop_console: true, drop_debugger: true, dead_code: true } } // 配置 externals，将大型的第三方库从打包代码中剥离 externals: { 'vue': 'Vue', 'jquery': 'jQuery', 'bootstrap': 'Bootstrap', 'echarts': 'echarts', 'moment': 'moment' } // 使用 Webpack-bundle-analyzer 查看打包后的各个模块的大小 configureWebpack: { plugins: [ new BundleAnalyzerPlugin() ] }
2. Webpack optimization
Using multi-threaded build can greatly To improve packaging speed, you can use thehappypackplug-in to implement multi-threaded builds. To use this plug-in, you need to installhappypackfirst:
npm install happypack -D
Then modify the original configuration file:
module: { rules: [ { test: /.js$/, loader: 'babel-loader' }, ... ] }
to:
const HappyPack = require('happypack'); const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); module: { rules: [ { test: /.js$/, exclude: /node_modules/, loader: 'happypack/loader?id=happyBabel' }, ... ] }, plugins: [ new HappyPack({ id: 'happyBabel', loaders: ['babel-loader'], threadPool: happyThreadPool, verbose: true }) ]
Use ## here #happypackPlugin to enable multi-threaded builds.
const path = require('path'); const webpack = require('webpack'); const dllPath = 'static/dll'; module.exports = { entry: { vendor: ['vue', 'vue-router', 'vuex', 'axios', 'lodash'] // 需要单独打包的库 }, output: { path: path.join(__dirname, `../${dllPath}`), filename: '[name].dll.js', library: '[name]_[hash]' // 暴露全局变量，避免前后两次打包，库名字变更 }, plugins: [ new webpack.DllPlugin({ name: '[name]_[hash]', path: path.join(__dirname, `../${dllPath}`, 'manifest.json') }) ] };
cross-env NODE_ENV=production webpack --config ./build/webpack.dll.js --progress --hide-modules
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
