1

Em uma aplicação VueJS com template Webpack, tenho a necessidade de importar uma série de SVG's de acordo com os parâmetros de um usuário.

Os SVG's são arquivos fixos, mas são carregados dinamicamente na aplicação. Se eu importar todos os arquivos de uma vez, o bundle fica muito grande (por volta de 13mb). Também não consegui utilizar o dynamic import porque neste caso o import seria uma expressão, algo como import(x) onde x é o nome do arquivo a ser importado de acordo com os parâmetros do usuário.

Qual seria a solução para este problema? Como posso realizar o lazy load de um asset de acordo com os parâmetros do usuário?

3
  • Podes servir esse conteúdo por ajax?
    – Sergio
    Commented 13/10/2017 às 18:59
  • É uma solução caso não seja possível realizar esse import
    – Vinícius
    Commented 13/10/2017 às 19:19
  • @Sergio, um problema que vejo com ajax é ter de controlar o cache desse arquivo uma vez carregado... algo que o dynamic import faz com maior facilidade
    – Vinícius
    Commented 13/10/2017 às 19:31

1 Resposta 1

0

É possível realizar o import dos arquivos inline através do svg-inline-loader no Webpack. Para evitar a colisão dos imports svg nos arquivos CSS foi necessário utilizar a configuração issuer. O webpack.base.config ficou assim:

{
  test: /\.(svg)(\?.*)?$/,
  issuer: /\.css$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
},
{
  test: /\.svg(\?.*)?$/,
  loader: 'svg-inline-loader',
}

Para realização dinâmica do import o seguinte trecho de código pode ser utilizado

let fileName = 'foo.svg'

import(`./svg/${fileName}.svg`)
      .then(module => { ... } )

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .