css 技巧 nuxt打包优化

最新推荐文章于 2024-05-16 18:10:11 发布

qq_42176747

最新推荐文章于 2024-05-16 18:10:11 发布

阅读量1k

点赞数

分类专栏：常用方法 vue 文章标签： css javascript vue.js

本文链接：https://blog.csdn.net/qq_42176747/article/details/123707903

版权

常用方法同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

css 技巧

1. image-rendering 属性：用于设置图像缩放算法；

auto | crisp-edges | pixelated 展示效果分别为

auto| cirsp-edges|pixelated

2. draggable 属性：规定元素是否可拖动

<div>
  <div class="drag" draggable="true" id="dragger" ondragstart="handleDragStart(event)">拖动元素</div>
  <div class="drop" ondrop="handleDrop(event)" ondragover="allowDrop(event)">放置区域</div>
</div>

 function handleDragStart(e) {
    e.dataTransfer.setData('DRAG_NODE_ID', e.target.id)
  }
  function handleDragOver(e) {
    e.preventDefault();
  }
  function handleDrop(e) {
    e.preventDefault();
    var data = e.dataTransfer.getData('DRAG_NODE_ID');
    e.target.appendChild(document.getElementById(data));
  }

3.vue项目优化

cdn引入：

在index.html中加入

 <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>

在bulid/webpack.base.conf.js文件中，增加externals，将引用的外部模块导入，如下：

module.exports = {
 entry: {
  app: './src/main.js'
 },
 externals:{
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex':'Vuex'
 }

格式为 ‘aaa’ : ‘bbb’, 其中，aaa表示要引入的资源的名字，bbb表示该模块提供给外部引用的名字，由对应的库自定。例如，vue为Vue，vue-router为VueRouter.

去掉原有的引用

 去掉import，去掉Vue.use(XXX)，如：
 // import Vue from 'vue'
 // import Router from 'vue-router'
 // Vue.use(Router)

使用gzip方式压缩
a. 安装compression-webpack-plugin
b. vue.config.js文件进行webpack配置（没有此文件可以在项目根路径创建一个文件）：

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
       plugins: [
           new CompressionPlugin({
               algorithm: 'gzip', // 使用gzip压缩
               test: /\.js$|\.html$|\.css$/, // 匹配文件名
               filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
               minRatio: 1, // 压缩率小于1才会压缩
               threshold: 10240, // 对超过10k的数据压缩
               deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
           }),
       ],
   },
};