经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
vue-cli3.0 日常优化
来源:cnblogs  作者:xiao旭  时间:2021/5/17 9:21:52  对本文有异议

1.项目第三方库 cdn引入

使用cdn资源主要是为了减小打包文件体积

vue.config.js 中

  1. // 是否为生产环境
  2. const isProduction = process.env.NODE_ENV !== 'development'
  3. // 本地环境是否需要使用cdn
  4. const devNeedCdn = false
  5. // cdn链接
  6. const cdn = {
  7. // cdn:模块名称和模块作用域命名(对应window里面挂载的变量名称)
  8. externals: {
  9. vue: 'Vue',
  10. // vuex: 'Vuex',
  11. 'vue-router': 'VueRouter',
  12. axios: 'axios',
  13. vant: 'vant',
  14. },
  15. // cdn的css链接
  16. css: [
  17. 'https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css',
  18. ],
  19. // cdn的js链接
  20. js: [
  21. 'https://cdn.staticfile.org/vue/2.6.10/vue.min.js',
  22. // 'https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js',
  23. 'https://cdn.staticfile.org/vue-router/3.0.3/vue-router.min.js',
  24. 'https://cdn.bootcss.com/axios/0.19.2/axios.min.js',
  25. 'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js',
  26. // 'https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js',
  27. // 'https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js'
  28. ]
  29. }
  30. module.exports = {
  31. chainWebpack:config => {
  32. // 配置cdn引入
  33. config.plugin('html').tap(args => {
  34. args[0].cdn = cdn
  35. return args
  36. })
  37. }
  38. configureWebpack:config => {
  39. // 用cdn方式引入,则构建时要忽略相关资源
  40. if (isProduction || devNeedCdn) config.externals = cdn.externals
  41. }

pulic / index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
  7. <meta name="format-detection" content="telephone=yes"/>
  8. <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  9. <!-- 引入样式文件 -->
  10. <% for (var i in htmlWebpackPlugin.options.cdn &&
  11. htmlWebpackPlugin.options.cdn.css) { %>
  12. <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>">
  13. <% } %>
  14. <!-- 引入js文件 -->
  15. <% for (var i in htmlWebpackPlugin.options.cdn &&
  16. htmlWebpackPlugin.options.cdn.js) { %>
  17. <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  18. <% } %>
  19. </head>
  20. <body>
  21. <div id="app"></div>
  22. </body>
  23. </html>

2.将每个依赖包打包成单独的js/css文件

vue.config.js

  1. module.exports = {
  2. chainWebpack: config => {
  3. // 将每个依赖包打包成单独的js文件
  4. let optimization = {
  5. runtimeChunk: 'single',
  6. splitChunks: {
  7. chunks: 'all',
  8. maxInitialRequests: Infinity,
  9. minSize: 20000, // 依赖包超过20000bit将被单独打包
  10. cacheGroups: {
  11. vendor: {
  12. test: /[\\/]node_modules[\\/]/,
  13. name (module) {
  14. // get the name. E.g. node_modules/packageName/not/this/part.js
  15. // or node_modules/packageName
  16. const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
  17. // npm package names are URL-safe, but some servers don't like @ symbols
  18. return `npm.${packageName.replace('@', '')}`
  19. }
  20. }
  21. }
  22. }
  23. }
  24. Object.assign(config, {
  25. optimization
  26. })
  27. Object.assign(config, {
  28. output:{
  29. ...config.output,
  30. filename: `js/[name].[chunkhash].${version}.js`,
  31. chunkFilename: `js/[name].[chunkhash].${version}.js`
  32. },
  33. });

3.项目自动引入 第三方插件样式 去掉 使用cdn引入样式

babel.config.js中

  1. //style true 会自动引入vant css样式 打包的时候会一起打包到 第三方的css样式中
  2. // 开发时 引用配置
  3. module.exports = {
  4. presets: ['@vue/cli-plugin-babel/preset'],
  5. plugins: [
  6. [
  7. 'import',
  8. { libraryName: 'vant', libraryDirectory: 'es', style: false },
  9. 'vant'
  10. ]
  11. ]
  12. };

vant 在使用cdn引入时 main.js 入口文件需要改造

  1. //去掉vant引入
  2. //import vant from 'vant'
  3. // 通过 CDN 引入时不会自动注册 Lazyload 组件
  4. // 可以通过下面的方式手动注册
  5. Vue.use(vant.Row);
  6. Vue.use(vant.Col);
  7. Vue.use(vant.Icon);
  8. Vue.use(vant.Cell);

4.定义文件夹的缩写路径

vue.config.js

  1. const path = require('path')
  2. function resolve (dir) {
  3. return path.join(__dirname, dir)
  4. }
  5. module.exports = {
  6. chainWebpack:config => {
  7. // 定义文件夹的路径
  8. config.resolve.alias
  9. .set('@', resolve('src'))
  10. .set('@st', resolve('static'))
  11. }
  12. }

5.移除打包后文件的预加载prefetch/preload

vue.config.js

  1. module.exports = {
  2. chainWebpack:config=>{
  3. // production 生产环境 development 开发环境
  4. if (process.env.NODE_ENV === 'production') {
  5. // 为生产环境修改配置...
  6. // 移除 prefetch 插件
  7. config.plugins.delete("prefetch");
  8. // 移除 preload 插件
  9. config.plugins.delete('preload');
  10. // 压缩代码
  11. config.optimization.minimize(true);
  12. // 分割代码
  13. // config.optimization.splitChunks({
  14. // chunks: 'all',
  15. // })
  16. }
  17. }
  18. }

preload 是告诉浏览器页面必定需要的资源,浏览器一定会加载这些资源

prefetch 是告诉浏览器页面可能需要的资源,浏览器不一定会加载这些资源

6.不生成相应的 map文件

  1. module.exports = {
  2. productionSourceMap: false,
  3. }
  4. //productionSourceMap控制是否在生产环境下生成map文件,
  5. //而devtool是开发调试的配置,如果你配置成source-map,那就会生成这个文件,配置成false就行了。

如果不生效,依然会有map文件生成

检查configureWebpack配置中的devtool选项

  1. module.exports = {
  2. configureWebpack(config){
  3. config.devtool=config.mode==="production"?false:"source-map";
  4. }
  5. }

map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。也就是说map文件相当于是查看源码的一个东西。如果不需要定位问题,并且不想被看到源码,就把productionSourceMap 置为false,既可以减少包大小,也可以加密源码

原文链接:http://www.cnblogs.com/zjxlicheng/p/14769153.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号